CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Serge Lioutyi
Serge Lioutyi

Reputation: 3

Adding hover feature to .img-circle bootstrap element

Hello I've been struggling with trying to add a hover feature to .img-circle elements from the bootstrap template. Ideally I'd like the circular image to darken slightly to allow you to click to a popup window (which has already been coded)

This is my HTML. The CSS I haven't been able to find a hover solution that works.

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

Here's my fiddle https://jsfiddle.net/7z1caucd/ Just want the 200x200 images to darken when I hover over with my cursor. Can't figure it out in CSS. Please help.

Upvotes: 0

Views: 827

Answers (2)

Ian Hazzard
Ian Hazzard

Reputation: 7771

If you want to darken it, you'd have to use a wrapper. If you don't want to do that, you can change the opacity of the image to give it a :hover effect.

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

Upvotes: 0

marcusshep
marcusshep

Reputation: 1964

try putting the :hover on something other than the img tag. for example wrapping it in a div and putting the class there.

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

for the css:

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

Upvotes: 1

Related Questions