Transparent Image Hover Overlay

Create an animated & transparent overlay covering the image when hovered with pure css.

ash princess kawaii

orem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh

Paste the following script, where you wish the image to appear on your page.

<style>
.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.media__image { display: block; height:250px;width:300px;}
.media__body {
  background: rgba(41, 128, 185, 0.7);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3.75em 3em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.media__body:hover { opacity: 1; }
.media__body:after,
.media__body:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: 1em;
  content: '';
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}
.media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}
.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.media__body h2 { margin-top: 0; }
.media__body p { margin-bottom: 1.5em; }
.media:nth-child(2) .media__body { background: rgba(146, 41, 185, 0.7); }
.media:nth-child(3) .media__body { background: rgba(185, 41, 128, 0.7); }
.media:nth-child(4) .media__body { background: rgba(185, 50, 41, 0.7); }
.media:nth-child(5) .media__body { background: rgba(185, 146, 41, 0.7); }
.media:nth-child(6) .media__body { background: rgba(128, 185, 41, 0.7); }
</style>

<div class="media">
<img class="media__image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7W9KGTaylmDLkt8TKBlC1Ie_d8_ISSLyW-1x2PLRiktptEq8IQJsGYZYD0dOvD0Eiq-P7xgWLepQR44620_8am15YDTnTiaWmRgBkSmf1vNHtF_HcJie_zWURO2JvLVLIXTzw1XqgKmLO/s1600/ayuning.jpg" />
  <br />
<div class="media__body">
<h2>ash princess kawaii</h2>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh 
</p></div>
</div>

Change ur own  image and the description .