A very practical mouse hover effect based on css3_html/css_WEB-ITnose

Today I bring you a very practical mouse hover effect based on CSS3. With this special effect, a translucent mask layer falls down when the mouse passes over it. The effect is very good, and it is implemented in pure CSS3, with very little code and very practical. The effect is as follows:

Online preview Source code download

Implemented code:

html code:

 <div align="center" style="position: relative;">        <div class="contener">            <div class="txt_init">                LOW POLY BACKGROUND</div>            <div class="opac">                Download</div>        </div>    </div>

css3 code:

  .contener{  width:310px;  height:140px;  background-image:url(fond.png);  overflow: hidden;  cursor: pointer;  position:relative;}.txt_init{  position: absolute;  bottom: 5px;  right: 5px;  font-family: 'Roboto';  font-size: 22px;  color: #ffffff;  font-weight: 500;}.opac{  opacity: 0;}.contener:hover .opac{  width:310px;  position: absolute;  z-index: 1;  font-family: 'Roboto';  font-size: 25px;  color: #ffffff;  font-weight: 300;  line-height: 140px;  height:140px;  opacity: 1;  background-color: rgba(0,0,0,0.7);  -webkit-animation:oblik 0.4s ease-in;  -webkit-transform-origin: 0% 100%;  -moz-animation:oblik 0.4s ease-in;  -moz-transform-origin: 0% 100%;  -ms-animation:oblik 0.4s ease-in;  -ms-transform-origin: 0% 100%;  animation:oblik 0.4s ease-in;  transform-origin: 0% 100%;  }@-webkit-keyframes oblik {  0% {opacity:0;-webkit-transform: rotate(-45deg);}  100% {opacity:1;-webkit-transform: rotate(0deg);}   }@-moz-keyframes oblik {  0% {opacity:0;-moz-transform: rotate(-45deg);}  100% {opacity:1;-moz-transform: rotate(0deg);}   }@-ms-keyframes oblik {  0% {opacity:0;-ms-transform: rotate(-45deg);}  100% {opacity:1;-ms-transform: rotate(0deg);}   }@keyframes oblik {  0% {opacity:0;transform: rotate(-45deg);}  100% {opacity:1;transform: rotate(0deg);}   }