How can I change the opacity of an image on hover and simultaneously display text in the center of the image?
This is my code:
<div class="col-md-4 j-t">
<div class="middle">
<div class="text-middle">Play</div>
</div>
</div>
CSS:
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.text-middle {
background-color: white;
color: black;
font-size: 16px;
padding: 16px 32px;
}
.j-t {
height: 315px;
background: url("pictures/golden_cut.jpg") center center no-repeat;
background-size: cover;
transition: .5s ease;
backface-visibility: hidden;
opacity: 1;
}
.j-t:hover {
opacity: 0.3;
}
.j-t:hover .middle{
opacity: 1;
}
However, when implemented as is, the text in the middle is also affected by the 0.3 opacity from the image. How can I make sure the text remains at full opacity?
Your assistance would be greatly appreciated.