user3786102 user3786102 - 4 months ago 9
HTML Question

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

Answer

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

Comments