One of the latest trends in UI Design is to use some cool hover effects on images to make them look special Effects Using CSS
I hope this tutorial will help UI Designers and Developers
I hope this tutorial will help UI Designers and Developers
Just follow my Simple Steps
HTML Markup
html code here is simple and straight forward. We have a main wrapper inside which we are keeping one image and one additional div.
<div class="mainimg_wrapp">
<div class="gallery_icon">
<img src="images/css_shine_hover_effect.png"
alt="">
</div>
</div>
CSS Code
Let’s go to the CSS code. Follow the Below CSS.
.mainimg_wrapp {
height: 286px;
margin-left: 50px;
margin-top: 120px;
position: absolute;
width: 254px;
z-index: 1000;
}
.gallery_icon {
height: 286px;
padding: 3px;
position: relative;
width: 254px;
border:solid 3px #f1f1f1;
}
.gallery_icon:after {
background-color: rgba(255, 255, 255, 0.9);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: none 0s ease 0s ;
width: 0;
}
.gallery_icon:hover:after
{
background-color: rgba(255, 255, 255, 0);
transition: all 0.4s ease-out 0s;
width: 120%;
}
Demo Download
ఇది బహు à°µిà°šిà°¤్à°°à°®ుà°—ా ఉన్నది... à°à°³ా à°®ానవ... à°¬ాà°—ుà°—ా à°šేà°¸ిà°¤ిà°µి....
ReplyDeletevery nice cool effect...thanks for the snippet....
ReplyDelete