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