.img-circleブートストラップ要素にホバー機能を追加する

Question

こんにちは私は、ブートストラップテンプレートから.img-circle要素にホバー機能を追加しようとしています。理想的には、円形の画像を暗くしてポップアップウィンドウ（これは既にコード化されています）をクリックすることができます。

これは私のHTMLです。 CSS私は動作するホバーソリューションを見つけることができませんでした。

 <div class="col-lg-4 col-sm-6 text-center"> 
       <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');"> 
      <a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');"><h3>Serge</h3></a> 
      <h4>Deal sourcing and pricing </h4> 
     </div> 

     <div class="col-lg-4 col-sm-6 text-center"> 
      <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" 
       onclick="toggle_visibility('popup-box2');"> 
      <a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');"><h3>Ed</h3></a> 
       <h4>Private wealth &amp; HNWI liason </h4> 

     </div> 

     <div class="col-lg-4 col-sm-6 text-center"> 
      <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" 
       onclick="toggle_visibility('popup-box3');"> 
      <a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');"><h3>Mayank Gupta</h3></a> 
       <h4>Deal structuring &amp; compliance </h4> 

     </div> 

ここに私のバイオリンhttps://jsfiddle.net/7z1caucd/はちょうど私が私のカーソルを上にマウスを移動するとき暗くし200x200の画像が欲しいのです。 CSSでそれを理解できません。助けてください。

Answer 1

:hoverをimgタグ以外に入れてみてください。たとえばdivにラップしてそこにクラスを入れます。 CSSの

<div class="img-circle"><img src="http://placehold.it/200x200" /></div> 

：

.img-circle:hover{ 
    opacity: 0.5; 
} 

Answer 2

あなたがそれを暗くしたい場合は、ラッパーを使用する必要があると思います。これをしたくない場合は、画像の不透明度を変更して:hoverの効果を与えることができます。

.img-circle:hover { 
 
    opacity: 0.7; 
 
}

<div class="col-lg-4 col-sm-6 text-center"> 
 
    <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');"> 
 
    <a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');"><h3>Serge</h3></a> 
 
    <h4>Deal sourcing and pricing </h4> 
 
</div> 
 

 
<div class="col-lg-4 col-sm-6 text-center"> 
 
    <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');"> 
 
    <a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');"><h3>Ed</h3></a> 
 
    <h4>Private wealth &amp; HNWI liason </h4> 
 

 
</div> 
 

 
<div class="col-lg-4 col-sm-6 text-center"> 
 
    <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');"> 
 
    <a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');"><h3>Mayank Gupta</h3></a> 
 
    <h4>Deal structuring &amp; compliance </h4> 
 

 
</div>