Forums

JosiahB

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

html:

<div id="mydiv">
  <a href="linklocation">Anchor</a>
</div>

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.

ChrisxClash

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

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

ChrisxClash

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

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.

ChrisxClash

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

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

ChrisxClash

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

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

ChrisxClash

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.

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

ChrisxClash

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

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

ChrisxClash

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

treehouse : what would you like to learn today?

Forums

Image slowly displayed on hover over a link