Grow your CSS skills. Land your dream job.

Image slowly displayed on hover over a link

  • # July 5, 2012 at 1:49 pm

    Hello I need some simple js to to slowly fade in an image when a link is hovered over ….

    html:

    CSS:

    #mydiv a:hover {
    background-image: url(images/myimage.png);
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;

    }

    Any help would be appreciated!! :)

    # July 5, 2012 at 2:01 pm

    You could actually use CSS transitions here!

    http://codepen.io/pen/9256/2

    It should work with images as well.

    # July 5, 2012 at 2:02 pm

    You can do this using pure CSS3, but in order to include support for older browsers, I’ve included a jQuery version as well.

    link: http://codepen.io/chrisxclash/pen/16/2

    # July 5, 2012 at 2:47 pm

    that is close to what I am looking for …. but does that replace the text link? Because I need both … it is for a portfolio that I am working on and it will have someones name and when you hover over the link and image of the person will transition in next to the link …

    Thanks! :)

    # July 5, 2012 at 3:05 pm

    Nah, it shouldn’t I just took it out for simplicity. However, if you want to use an image with opacity you’ll have to use a separate element to fade in and out, or your text will fade with it. I threw together a small example, but I’m sure someone can come up with a better solution.

    I did try :before and :after but couldn’t really get that to work.

    link: http://codepen.io/chrisxclash/pen/16/5

    # July 5, 2012 at 3:15 pm

    You would need two transitions then. One for the link and one for the background image.

    The problem is that you can’t transition a background image as it’s a binary state…it’s either on or it’s not.

    You could probably do that with JS though.

    # July 5, 2012 at 3:54 pm

    Just figured out you can use background for the transition, but apparently you have to have a background in it before hover (transparent in this case) in order for it to fade properly.

    Also, the js is the same as before, didn’t change it yet.

    link: http://codepen.io/chrisxclash/pen/16/6

    # July 5, 2012 at 5:34 pm

    that is pretty close to what I want … here is a link to my website that I am doing it on … http://josiahbphotography.hostei.com/folio.html …. hover over “Matty” …. what I need is the image to be about 15-20px away from the text …

    Thanks so much for you help so far!! :)

    # July 5, 2012 at 6:07 pm

    Try adding margin-left: 20px to the img css. (Looks like it’s on line 409).

    # July 5, 2012 at 6:14 pm

    I am a little confused … I have not add any of the code that you made yet … the distance (on my website is fine) but the problem I was having in CODEPEN was that the link moved along with the background-image …

    Hope that makes sense! :)

    # July 5, 2012 at 6:19 pm

    Ohhh my bad. I thought you meant on your site. Are you going to be replacing that hover on “Matty” with the stuff we’re doing on codepen? If so, you should pretty much be able to keep what you already have and just change some css.

    # July 5, 2012 at 6:21 pm

    Yes, I can, but the only thing was is it possible to move the :hover background-image to the right with out moving the initial link?

    Thanks! :)

    # July 5, 2012 at 6:51 pm

    You can, however then you have to make the width of the element larger and you also have a huge blank area under the link that causes the hover to trigger. You may be better off doing what you have on your site and having the img inside of the anchor tag and just fading it in that way. Either way, here’s the result below.

    link: http://codepen.io/chrisxclash/pen/16/7

    # July 5, 2012 at 7:02 pm

    so would there be a way to use the same code that I have on my website and then apply some js or jquery to make it fade in and out so that the image is not triggered until the link is hovered over?

    Thank you sooo much for all your help!!! :)

    # July 5, 2012 at 7:23 pm

    I’ll have to throw some jQuery together for you later, since I’ve gotta run for now. Here’s a simple CSS3 version, but older browser support for it won’t be great, so you’ll probably be better off with jQuery. I’ll get on that for you later.

    I’m glad to help!

    link: http://codepen.io/chrisxclash/pen/16/10

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".