Colorize GIF on rollover

colorize-gif-on-rollover.markdown

Colorize GIF on rollover

A Pen by Chris Haff on CodePen.

License.

index.html

<div class="drawer">
  <div class="cta-area">
    <h3>Here is some sample text that could have a CTA. Roll over the yellow bar to turn the video to full color.</h3>
  </div>
  <div class="gif"></div>
</div>
                 

style.css

body {
  margin: 0;  
  font-family: sans-serif;
}

.drawer {
  width: 100%;
  height: 100%;
  position: relative;
}

.drawer .gif {
  background: center / cover no-repeat url("http://giant.gfycat.com/DeliriousSoupyAfricanjacana.gif");
  filter: grayscale(1);
  transition: all 1s;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: -1;
}

.drawer .cta-area {
  background: rgba( 130, 130, 0, 0.3);
  transition: background 1s;
  color: white;
  position: absolute;
  width: 200px;
  height: 100vh;
  left: 0px;
  top: 0px;
  padding: 50px;
  line-height: 2;
}

.drawer .cta-area:hover ~ .gif {
  filter: grayscale(0);
}

.drawer .cta-area:hover {
  background: rgba( 130, 130, 0, 0.0);
}