Hinzufügen von Hover-Funktion zu .img-circle Bootstrap-Element

Question

Hallo Ich habe mit dem Versuch versucht, eine Hover-Funktion zu .img-Kreis-Elementen aus der Bootstrap-Vorlage hinzuzufügen. Idealerweise möchte ich, dass das kreisförmige Bild etwas dunkler wird, damit Sie auf ein Popup-Fenster klicken können (das bereits codiert wurde)

Dies ist mein HTML. Das CSS Ich konnte keine Hover-Lösung finden, die funktioniert.

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

Hier ist meine Geige https://jsfiddle.net/7z1caucd/ einfach die 200x200 Bilder wollen verdunkeln, wenn ich mit meinen Cursor der Maus auf. Kann es in CSS nicht herausfinden. Bitte helfen Sie.

Answer 1

versuchen, die :hover auf etwas anderes als die img-Tag setzen. zum Beispiel, wickeln Sie es in eine div und setzen Sie die Klasse dort.

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

für die CSS:

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

Answer 2

Wenn Sie es verdunkeln wollen, sollten Sie einen Wrapper verwenden. Wenn Sie das nicht möchten, können Sie die Deckkraft des Bildes ändern, um einen Effekt zu erhalten, der :hover ist.

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