I have created an animation where an image transitions from black and white to colored upon hover, accompanied by overlay text. However, when hovering over the text, the image reverts back to black and white. How can I ensure that the image stays in color even with the overlay text?
Below is the code snippet I am currently using:
#img {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
-webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
margin-bottom:20px;
}
#img:hover {
filter: none; /* IE6-9 */
-webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container1:hover .image {
opacity: 0.3;
}
.container1:hover .middle {
opacity: 1;
}
.text {
background-color: rgb(45, 45, 65);
color: rgb(255, 250, 235);
text-align: center;
font-size: 14px;
padding: 16px 32px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-4 col-xs-6 container1">
<img id="img" class="img-responsive" src="http://lorempixel.com/400/200/"/>
<div class="middle">
<div class="text">Text</br>
<a href="https://vimeo.com/206720941" target="_blank">Watch Video</a>
</div>
</div>
</div>