I have designed button images and I want the image's opacity to change when a user hovers over it while keeping other elements like span and h2 completely visible. Despite targeting only the img element in my CSS for hover effect, all elements' opacity changes. Why is this happening? What mistake am I making and how can I correct it? Here's the code snippet:
body {
background-color: black;
}
.featured-list li {
display: inline-block;
margin-right: .8%;
}
.featured-list a {
display: block;
}
.featured-list {
text-align: center;
padding: 0;
margin: 0 auto;
}
a.feature-img img {
width: 425px;
border-radius: 5px;
}
a.feature-img {
text-align: center;
}
.f-cta, .f-img-content h2 {
font-family: 'Abel',Helvetica,Arial,Lucida,sans-serif;
font-weight: 100;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.f-img-content h2 {
color: #fff;
top: 34%;
}
.f-cta {
background: #fff;
width: 50%;
border-radius: 3px;
padding: 7px;
color: #000;
top: 48%;
font-size: 1.3em;
}
.f-img-content {
position: relative;
text-align: center;
overflow: hidden;
}
a.feature-img:hover img {
opacity: .6;
}<ul class="featured-list">
<li><a href="#" class="feature-img">
<div class="f-img-content">
<h2>Lorem Ipsum project title</h2>
<span class="f-cta">View Project</span>
<img src="https://i.imgur.com/EENJU66.gif">
</div>
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
</ul>