Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS hover images for home page widgets
Tagged: css; hover; executive
- This topic has 6 replies, 3 voices, and was last updated 11 years ago by yakkas.
-
AuthorPosts
-
April 3, 2013 at 3:42 pm #32923orovioMember
I am trying to create a CSS hover image to be used in a widget area on the home page. I have created the files in Fireworks and exported part of the CSS, but now I am completely stuck on where to put it, and what I am missing.
Here is the code generated by Fireworks:
.e3circles{ background:url("e3circles.png") top left no-repeat; }
.icons_equity_symb{ width:287px; height:289px; background-position:-10px -10px; }
.icons_equity_symb_1{ width:287px; height:289px; background-position:-307px -10px; }
.icons_energy_symb{ width:300px; height:289px; background-position:-604px -10px; }
.icons_energy_symb_1{ width:300px; height:289px; background-position:-914px -10px; }
.icons_easy_symb{ width:313px; height:289px; background-position:-1224px -10px; }
.icons_easy_symb_1{ width:313px; height:289px; background-position:-1547px -10px; }
.icons_pop{ width:900px; height:289px; background-position:-1870px -10px; }
.icons_pop_1{ width:900px; height:289px; background-position:-2780px -10px; }The image can be seen at: http://rachelorovio.com/sprites/e3circles.png
I started off using the theme Minimum which has the circle social media icons: http://demo.studiopress.com/minimum/
My client wants to keep the circles, but we had to switch to the theme Executive for other reasons: http://demo.studiopress.com/executive/
I have researched this for several days now, and it seems the more I learn the more complicated it becomes. Every script is different, so I can’t even compare them side by side. Please let me know if you can help!! Thanks!!!!
April 3, 2013 at 5:11 pm #32941yakkasMemberUsing a mixture of what you have provided and the Minimum theme tutorial (I removed the #home-featured divs.... you might need to include this in your css again) - this should work.
add this to your css
a.icons_equity_symb, a.icons_equity_symb:hover, a.icons_energy_symb, a.icons_energy_symb:hover, a.icons_easy_symb, a.icons_easy_symb:hover, a.icons_pop, a.icons_pop:hover {
background: url("e3circles.png") top left no-repeat;
display: block;
margin: 0 auto 30px;
padding: 0;
text-indent: -9999px;
}
a.icons_equity_symb{ width:287px; height:289px; background-position:-10px -10px; }
a.icons_equity_symb:hover{ width:287px; height:289px; background-position:-307px -10px; }
a.icons_energy_symb{ width:300px; height:289px; background-position:-604px -10px; }
a.icons_energy_symb:hover{ width:300px; height:289px; background-position:-914px -10px; }
a.icons_easy_symb{ width:313px; height:289px; background-position:-1224px -10px; }
a.icons_easy_symb:hover{ width:313px; height:289px; background-position:-1547px -10px; }
a.icons_pop{ width:900px; height:289px; background-position:-1870px -10px; }
a.icons_pop:hover{ width:900px; height:289px; background-position:-2780px -10px; }
Then use these to add to your featured widgets as explained in the Minimum theme tutorial under the heading Set up the Social Sites Links replacing the links with the ones you want:
a class="icons_equity_symb" href="#"></a
Hope that helps
[edit] - can't see to get those links to display - so you'll just have to add to the end of the above, then replace the class for each link.... use the examples in the tutorial link and replace the class for each one
April 3, 2013 at 5:24 pm #32945orovioMemberThanks! Trying it right now. Will let you know if it works.
April 3, 2013 at 5:50 pm #32956orovioMemberIt works!! YEA. I get to sleep tonight! Thank you.
Here is the link in case you want to see it in action.
April 3, 2013 at 7:06 pm #32980yakkasMemberCool - No worries 🙂
Looks really nice
April 20, 2013 at 8:53 am #36560cmaddonMemberyakkas - I have a similar issue with the education theme, but I haven't gained near the ground orvio has! I want to have image replacements, but the base code isn't there as it is in the minimum theme. Am I looking at a lot, here?
Thanks
April 22, 2013 at 4:34 pm #36988yakkasMemberhey cmaddon - it looks like you got your working or am I looking at the wrong thing?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.