WordPress.org

Support

Support » How-To and Troubleshooting » Hover images-Social Media Menu

Hover images-Social Media Menu

  • I’ve been trying to add hover effects to my social media image links on my page http://www.livinginanotherlanguage.com.

    I’ve used this html in my text widget:

    <a id="roll_one" href="LINK-URL">Description text that will not be displayed</a>

    And this in my CSS:

    #roll_one {display:block; width:300px; height:200px; text-indent:-999em; background:url("IMG1-URL");}
    #roll_one:hover {background:url("IMG2-URL");}

    It worked just fine to get the effect I wanted, but the only problem was that I couldn’t get the linked images to be horizontal like I have it in my site right now. They would default to a vertical straight line. How can I change this?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Put them in:

    <ul class="my-socials">
    	<li><a id="roll_one" href="LINK-URL">Facebook</a></li>
    	<li><a id="roll_one" href="LINK-URL">Twitter</a></li>
    </ul>

    Then they will display in a list format

    I was able to get a vertical list, but I’m really wanting one to go horizontally. Your code worked perfectly for a vertical list! I wish that’s what I needed. 🙁

    Is there something in my CSS code that’s triggering it to not line up the way I want it to? Grr.. I’m making sure in the css code that change the width and hight to 35px by 35px (the exact dimensions of the image link icons).

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Can you link the webpage with the issue?

    esmi

    @esmi

    Forum Moderator

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. It will cut your development time in half.

    Or you could just use whatever developer tool is available in your web browser.

    What would I be looking for? My social media images (the ones I’m trying to figure out hover for) are exactly aligned the way I want right now. It’s just when I try to put the hover effect that I can’t seem to get them to align horizontally. 🙁

    esmi

    @esmi

    Forum Moderator

    I’m not sure I understand the problem. I can’t see any onhover issues with the social media icons at the end of every post .

    I’ve made a custom social media menu below my picture on the right hand side of the page. They’re yellow little icons. I’m trying to modify them so that when someone does a hover over they change to grey. I have been able to make the hover work just fine, its just when I put the code in for some reason they end up vertically and not horizontally. I’ve used the CSS code above and the html code (for the text widget) that Archie22is gave me.

    I’m using Chrome (latest version) and the hover simply doesn’t work.
    EDIT: not working in FF,IE or Safari. Did you remove the code provided by archie or..?

    I don’t have the hover turned on now due to it screwing up my page. If it helps, I’ll get it up tomorrow so you can see the problem.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Hover images-Social Media Menu’ is closed to new replies.