CSS hover images for home page widgets

Community Forums Forums Design Tips and Tricks CSS hover images for home page widgets

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  yakkas 2 years, 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #32923


    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!!!!



    Using 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



    Thanks! Trying it right now. Will let you know if it works.



    It works!! YEA. I get to sleep tonight! Thank you.

    Here is the link in case you want to see it in action.





    yakkas – 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?





    hey cmaddon – it looks like you got your working or am I looking at the wrong thing?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.