Today brings you a very practical mouse hover effect based on CSS3. This effect, when the mouse over the time of a translucent mask layer down. The effect is very good, and is pure CSS3 realization, the code is very few, very practical. The effect is as follows:
Online preview Source Download
Code to implement:
HTML code:
<div align="Center"style="position:relative;"> <divclass="Contener"> <divclass="Txt_init">Low POLY BACKGROUND</div> <divclass="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: -;}. OPAC{Opacity:0;}. Contener:hover. OPAC{width:310px;position:Absolute;Z-index:1;font-family:' Roboto ';font-size:25px;Color:#ffffff;Font-weight: -;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);} }
Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/9986
A very useful mouse hover effect based on CSS3