MuaathAli MuaathAli - 2 months ago 12
CSS Question

How to make image animation take effect on overlay text?

I made an animation for an image to turn it from black and white to colored on hover with an overlay text, but when hovering over the overlay text images goes back to black and white. How can I keep it colored?

Here's my code:



#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>





enter image description here

Answer Source

You just need to change :hover selector of your element from #img:hover to .container1:hover #img, thus every-time when mouseenter container it adds style property to #img.

.container1:hover #img {
  filter: none;
  /* IE6-9 */
  -webkit-filter: grayscale(0);
  /* Google Chrome, Safari 6+ & Opera 15+ */
}

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

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

.container1:hover #img {
  filter: none;
  /* IE6-9 */
  -webkit-filter: grayscale(0);
  /* Google Chrome, Safari 6+ & Opera 15+ */
}

.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>