ホバーにimgを書く

Question

ホバー中に画像上に説明文を入れたいと思います。それを行う最善の方法は何ですか？ jsが必要か、CSSソリューションがありますか？スニペットで

代わりにdivを私は円形の形状で画像を持っています。 imgをホバリングすると、例のように少し大きくなります。

ありがとうございました。私の悪い @mehulmpt

.circle{ 
 
    width: 150px; 
 
    height: 150px; 
 
    background: yellow; 
 
    border-radius: 100%; 
 
    text-align:center; 
 
    display: inline-block; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.circle:hover{ 
 
    transform: scale(1.1); 
 
    
 
}

<div class="circle"> 
 

 
</div> 
 
<div class="circle"> 
 

 
</div> 
 
<div class="circle"> 
 

 
</div>

Answer 1

。

.circle { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-align: center; 
 
    background: yellow; 
 
    border-radius: 100%; 
 
    position: relative; 
 
    display: inline-block; 
 
    transition: all .2s ease-in-out; 
 
} 
 

 
.circle:hover{ 
 
    transform: scale(1.1); 
 
} 
 

 
/* NEW CODE */ 
 
.circle:after { 
 
    content: attr(data-desc); 
 
    display: none; 
 
    position: absolute; 
 
    top: 50%; 
 
    background-color: white; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.circle:hover:after { 
 
    display: inline-block; 
 
}

<div class="circle" data-desc="Hello"></div> 
 
<div class="circle" data-desc="World"></div> 
 
<div class="circle" data-desc="just wrap the img and it works"> 
 
    <img width="100%" height="100%" src="http://www.matmasar.wz.cz/kone.png"> 
 
</div>

Answer 2

.circle{ 
 
    width: 150px; 
 
    height: 150px; 
 
    background: yellow; 
 
    border-radius: 100%; 
 
    text-align:center; 
 
    position: relative; 
 
    display: inline-block; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.hoverContent { 
 
    opacity: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    transition: all .2s ease-in-out; 
 

 
} 
 
.circle:hover{ 
 
    transform: scale(1.1); 
 
} 
 

 
.circle:hover .hoverContent { 
 
    opacity: 1; 
 
}

<div class="circle"> 
 
    <span class="hoverContent">Hey there 1</span> 
 
</div> 
 
<div class="circle"> 
 
    <span class="hoverContent">Hey there 2</span> 
 
</div> 
 
<div class="circle"> 
 
    <span class="hoverContent">Hey there 3</span> 
 
</div>

Answer 3

。ごめんなさい。私はdivで例を挙げた。私はimgsを使っていたはずです。あなたのコードは、私が考えていたのは正しいですが、imgで動作しません。imgには終了タグがないので、できません。どのように私はそれを書き換えることができますか？御時間ありがとうございます。唯一のCSSとHTML属性を使用して

.circle{ 
 
display: inline-block; 
 
    transition: all .2s ease-in-out; 
 
    width: 150px; 
 
} 
 
.circle:hover{ 
 
    transform: scale(1.1); 
 
    
 
}

<img src="http://www.matmasar.wz.cz/kone.png" class="circle"> 
 
<img src="http://www.matmasar.wz.cz/kone.png" class="circle"> 
 
<img src="http://www.matmasar.wz.cz/kone.png" class="circle">