How do I do a rollover background image?

  • I’ve modified the theme a little and made it my own kinda. Here is the css I have for this.. I don’t know how to make it rollover the footer and then it change colors whenever you rollover a link. I want to eventually have a link for facebook and twitter and maybe more at the bottom of the page (https://hawk-talk.com/newspaper) and as you see now I have one picture…

    https://hawk-talk.com/newspaper/wp-content/themes/blueberry/images/strawberry-footer-ro.jpg

    And when you roll over the facebook logo, I want the facebook logo to look like this:

    https://hawk-talk.com/newspaper/wp-content/themes/blueberry/images/strawberry-footer.jpg

    I’m not sure how you would do this with a “background image” or what the css would be.. And can I do different rollovers for the same image? Like if you rollover facebook then it “lights up” and then if you rollover twitter, it “lights up”.. Thanks in advance, my css is below.. tell me if you need anything else!

    /* hawkberry css */

.hawkberry #header {
    background-image: url('images/strawberry-header.jpg');
}

.hawkberrycolor, .hawkberry a, .hawkberry h2 a:hover, .hawkberry h3 a:hover{
    color: #f00;
}

.hawkberry a:hover{
    color: #b00;
}

.hawkberry .entry a:visited{
    color: #f66;
}

.hawkberry #headertxt h1, .hawkberry #headertxt h1 a, .hawkberry #headertxt h2 {
    color: #eee;
}

.hawkberry #headertxt h1 a:hover {
    color: #fff;
}

.hawkberry #footer {
    background-image: url('images/strawberry-footer-ro.jpg');
    hover: url('images/strawberry-footer.jpg')
    color: #000;
}
/* [end] hawkberry css */
Viewing 15 replies - 1 through 15 (of 16 total)

  • hawktalk,

    You’re looking for this:

    #hawkberry #footer a {
   width: 800px;
   height: 200px;
   display: block;
   background: url('images/strawberry-footer-ro.jpg') no-repeat 0 0;
   color: #000;
   }

#hawkberry #footer a:hover {
   background: url('images/strawberry-footer.jpg') no-repeat 0 0;
   }

    Please add the correct width and height. Your footer code should now look something like this:

    <div id="footer" class="clear center">
 <a href="https://www.facebook.com/profile.php?id=100000247809024&ref=profile"/>
</div>

    Thread Starter Zac Gillman

    (@hawktalk)

    well that got rid of it all…

    hawktalk,

    Looks like you’re getting it. Remove the H2 tag and the link hidden there then remove the #footer-link style from your style sheet and you’re all set.

    Thread Starter Zac Gillman

    (@hawktalk)

    It doesn’t show the footer at all anymore. And when I take off display: block;, then it kinda does what I want, but it completely moves the footer

    hawktalk,

    Just missed you check the comment above. The background is repeating because of the H2 tag’s link. If this is necessary we can target it specifically but it doesn’t seem to be doing anything.

    Thread Starter Zac Gillman

    (@hawktalk)

    Okay, I did that.. Now it shows 2 footers..?

    Thread Starter Zac Gillman

    (@hawktalk)

    Woah, now it works. Okay next question.. Thank you so much for your help!

    I have a link for facebook now, but what if I wanted to put another image in the footer and link it to Twitter for example?

    hawktalk,

    I’ve been cheering you on ?? Looks like you removed the h2 tag which removed the second footer. Hopefully that was an older comment.

    Thread Starter Zac Gillman

    (@hawktalk)

    Yes thank you so much! I posted another question above, if you have any knowledge on that, please let me know ?? Thanks again!

    hawktalk,

    Do you know where in the code the previous Facebook and Twitter images are currently? They seem to be outside the Page content which makes me think they would be located at the bottom of the footer.php file. Looks as easy as copying the code from the previous link and creating a new image for the next social media icon.

    Thread Starter Zac Gillman

    (@hawktalk)

    They were located in footer.php about two seconds ago, but I just deleted them cause they weren’t relevant anymore.

    I wanted it to be all one image though. Like before, I just had the footer, and I combined the Facebook logo into the footer image together in photoshop. Now, it is a rollover link so whenever you click anywhere on the footer, you go to facebook. If I wanted to combine the footer (the new footer image with facebook logo) and a twitter logo, how would i make it to where you can scroll over the facebook logo and only the facebook logo changes. Then you scroll over the twitter logo and only the twitter logo changes. And each would have separate links

    The site I’m looking at that I really like is https://www.relevantstudents.com/index.php and if you look at the bottom, that is the look I am trying to go for

    hawktalk,

    In that web site the two footer links are two completely separate rollovers. Your website currently is only utilizing one and you only get one link per rollover.

    If you would like two rollovers. Make the red footer background a static background image and the Facebook and Twitter images position: relative in a new div. This would allow multiple social media rollovers.

    Something to this effect:

    <div id="footer" class="clear center">
 <div class="facebook"><a href="facebook.com"></a></div>
 <div class="twitter"><a href="twitter.com"></a></div>
</div>

    #footer would have a static background image and the other two would be rollovers positioned relatively within the footer div.

    Thread Starter Zac Gillman

    (@hawktalk)

    Okay, what code would you have to do to make it static? This is the first time I’ve dealt with background images and footers so sorry about all the questions!

    hawktalk,

    No worries. 

    #footer {
   width: 800px;
   height: 70px;
   background: url(images/strawberry-footer.jpg) no-repeat 0 0;
   }

    Check the width and height on that. The image would then only be a single strawberry footer image with no Facebook logo. Since we have no :hover style it is static.

    Thread Starter Zac Gillman

    (@hawktalk)

    awesome! thanks again so much ??

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘How do I do a rollover background image?’ is closed to new replies.