CODEWITHSUNDEEP
css
Валери К.
Валери К.

Reputation: 59

Text hover > image show to have transition?

I have this code when on text hover, image pops, but can's succeed with setting transition to it. When I hover the image pops instantly without any transition.

.link #img {
  position: absolute;
  top: -450%;
  left: 25%;
  display: none;
}

.link:hover #img {
  display: block;
}

#img {
  width: 160px;
  transition: 0.2s linear;
}
<a href="#" class="link">Photography<img src="content/images/a.png" id="img"></a>

Upvotes: 0

Views: 70

Answers (3)

Yuriy Popov
Yuriy Popov

Reputation: 92

I am a little bit edit the code. Here is working version. Check it please.

Just for your knowledge - property display can't be affected by transition, because it has only two states: displayed and not displayed and no states in between, so transition is not working for this purpose.

Doog luck :)

#img {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: 160px;
  transition: all .3s ease;
}

.link:hover #img {
  visibility: visible;
  opacity: 1;
}
<a href="#" class="link">Photography<img src="https://lh4.googleusercontent.com/-OowXWkgMSHI/AAAAAAAAAAI/AAAAAAAAANE/rOf2DCA2AXo/photo.jpg" id="img"></a>

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

Use opacity or visibility instead of display.

.link #img {
  position:absolute;
  top:0;
  left:150px;
  opacity:0;   
}
.link:hover #img {
  opacity:1;
}
#img {
  width:160px;    
  transition: 0.5s linear;    
}
<a href="#" class="link">Photography<img src="https://dummyimage.com/200x200/000/fff" 
id="img"></a

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

try with this code

use visibility or opacity and remove top:-450% from css

.link #img {
  position: absolute;
  left: 25%;
  visibility: hidden;
  opacity: 0;
}

.link:hover #img {
  visibility: visible;
  opacity: 1;
}

#img {
  width: 160px;
  transition: 0.5s linear;
}
<a href="#" class="link">Photography<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" 
    id="img"></a>

Upvotes: 2

Related Questions