Image slowly displayed on hover over a link

[JosiahB]

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

html:

Anchor

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

[TheDoc]

You could actually use CSS transitions here!

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

It should work with images as well.

[JosiahB]

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

[Paulie_D]

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.

[JosiahB]

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

[JosiahB]

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

[JosiahB]

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

[JosiahB]

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

[Author]

Posts