CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cmiotk
cmiotk

Reputation: 315

a tag showing image on hover with transition

I'm trying to display an image on the hover of an a tag which I have got complete and fully working, now I'm facing a problem...

I want the image to 'fade' in and out of the page when it is hovered rather than just appearing in order to give it a more satisfying finish.

My code at the minute is...

a.top-row:hover:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
z-index: 10;
top: -295px;
left: -30px; }

and to display the image I have seperate id's for each of the a tags so it's done like this..

a#a1:hover:after {
content: url(../images/cars/audi/a1.png); }

HTML -

 <a class="top-row" id="a1">A1</a>

Upvotes: 0

Views: 52

Answers (2)

Giladd
Giladd

Reputation: 1389

Like this? (background fixed, animating opacity)

a.top-row {
  position: relative;
}

a.top-row:after {
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  
  display: block;
  position: absolute;
  top: 100%;
  left: 100%;
  z-index: 10;
  width: 70px;
  height: 50px;  
  opacity: 0;
  content: ' ';
  pointer-events: none;
}
#a1:after {
  background: url(https://placehold.it/70x50);
}
#r8:after {
  background: url(https://placehold.it/70x50/ff00ff);
}

a.top-row:hover:after {
  opacity: 1;  
}
<a class="top-row" id="a1">A1</a><br/>
<a class="top-row" id="r8">R8</a>

Upvotes: 1

Aayush Gupta
Aayush Gupta

Reputation: 32

Having images fade-in using only CSS would only make it complicated. Instead you can use the jQuery fadeIn() and fadeOut() method to achieve the same.

HTML

<div>
<a link="" id="showme">abcd</a>
<img src="image.jpg" height="200" width="300" alt="button" id="btn">
</div>

jQuery

$('#showme').hover(
function() {
    $('#btn').fadeIn('slow');
},function() {
    $('#btn').fadeOut('slow');
});

CSS

div {
width:305px;
height:229px;
}
#btn {
display:none;
}

Upvotes: 0

Related Questions