WordPress.org

Ready to get started?Download WordPress

Forums

Hover images-Social Media Menu (12 posts)

  1. amgrove
    Member
    Posted 1 year ago #

    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?

  2. Archie22is
    Member
    Posted 1 year ago #

    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

  3. amgrove
    Member
    Posted 1 year ago #

    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. :(

  4. amgrove
    Member
    Posted 1 year ago #

    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).

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you link the webpage with the issue?

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    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.

  7. amgrove
    Member
    Posted 1 year ago #

  8. amgrove
    Member
    Posted 1 year ago #

    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. :(

  9. esmi
    Forum Moderator
    Posted 1 year ago #

    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 .

  10. amgrove
    Member
    Posted 1 year ago #

    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.

  11. Media X
    Member
    Posted 1 year ago #

    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..?

  12. amgrove
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic