CODEWITHSUNDEEP
htmltwitter-bootstrapcss
user3786102
user3786102

Reputation: 145

Apply opacity to img on hover

I am trying to apply an opacity to my image when I hover over it. Neither the opacity or transition are working when I apply it to my .imgAbout img class. Not sure where else I can apply the opacity to make it work. Any ideas what I could be doing wrong? Here is my CSS and HTML.

HTML

<div class="row">
    <div class="col-md-4">
      <div class="imgAbout">
        <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio">

        <div class="center-container">
          <a class="btn btn-sm btn-primary" href="bios/teamBio.html">View More</a>
        </div>
      </div>

      <h1>First Name Last Name</h1>
      <h3>Chairman &amp; CEO<br> 
      Senior Wealth Advisor</h3>
    </div> <!-- end col-md-4 -->
</div>

CSS

#about img {
  margin: 0 auto;
}

.imgAbout {
  position: relative;
}

.imgAbout img {
  display: block;
  height: auto;

  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.imgAbout img:hover {
  background: #50b948;
  opacity: 0.6;
}

.center-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center; 
}

.imgAbout .center-container .btn {
  visibility: hidden;
  opacity: 0;

  -webkit-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -ms-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -o-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: visibility 0.2s ease-in-out,opacity 0.2s ease-in-out;
}

.imgAbout:hover .center-container .btn {
  visibility: visible;
  opacity: 1;
}

Upvotes: 1

Views: 279

Answers (1)

Ivan
Ivan

Reputation: 40668

I have made a pen to show a possible solution : https://codepen.io/anon/pen/PzQPba I hope that's what you are looking for, if not, be sure to let me know.

You want to select the image when it's parent div is hovered, so it needs to be : .parentDiv:hover img. Then you can specify any CSS properties to it.

In you CSS file it would be like so :

.imgAbout:hover img {
  background: #50b948;
  opacity: 0.6;
}

Upvotes: 2

Related Questions