テキストの揺らぎ>画像には遷移がありますか？

Question

私はこのコードをテキストホバー上に置いていますが、イメージがポップしますが、それへの移行を設定すると成功する可能性があります。私がマウスを動かすと、イメージは変わらずに即座にポップアップします。

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

Answer 1

このコード

使用visibilityまたはopacityで試してみて、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>

012から top:-450%を削除

Answer 2

displayの代わりにopacity or visibilityを使用してください。

.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

Answer 3

私は少しコードを編集しています。ここに働くバージョンです。それを確認してください。

プロパティディスプレイは、表示されている状態と表示されていない状態との間に状態がないため、遷移の影響を受けることはありません。

Doog運:)

#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>