

Hello Friends today in this article we will learn how to create diffrent type of CSS hover effect .
Hover Rotating Icons
How to rotate fontaswome icons on hover …when you mouse over the div then icons will be rotate 360 deg .
<div class="wrapper"> <div class="effect1"> <div class="icon"><i class="fa fa-home"></i></div> <div class="txtbox">HOME</div> </div> <div class="effect1"> <div class="icon"><i class="fa fa-telegram"></i></div> <div class="txtbox">TELEGRAM</div> </div> </div>
<style type="text/css"> .effect1 { float:left; margin-left:10px; width:auto; height:100px; padding-left:20px; padding-right:2 cursor:pointer; border-radius:7px; background:#fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); -moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); transition: all ease-in-out 0.3s; } .icon { position:relative; float:left; margin-top:10px; color:#fff; width:40px; height:40px; top:20px; background:#03112c; font-size:25px; border-radius:100%; transition: all ease-in-out 0.8s; } .icon i { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; transition: all ease-in-out 0.3s; } .txtbox { float:left; margin-left:20px; font-family:Verdana, Geneva, sans-serif; font-size:22px; line-height:100px; } .effect1:hover .icon { background:none; border:1px dashed #03112c; animation: circle 5s linear infinite; } .effect1:hover .icon i { color:#03112c; } @keyframes circle { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } </style>
Change Border-Radius Direction on Hover
Here on mouse over on div the direction of Border Radius will be change.
<div class="wrapper"> <div class="effect2"> <div class="txtbox2">HOME</div> </div> <div class="effect2"> <div class="txtbox2">ABOUT US</div> </div> <div class="effect2"> <div class="txtbox2">SERVICES</div> </div> </div>
<style type="text/css"> .effect2 { float:left; margin-left:10px; width:auto; height:100px; padding-left:20px; padding-right:20px; cursor:pointer; border-radius:0px 30px 0px 30px; background:#fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); -moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); transition: all ease-in-out 0.3s; } .effect2:hover { border-radius:30px 0px 30px 0px; } </style>
Image Zoom Effect On Hover Using CSS
here the image will zoom on mouse over.
<div class="wrapper"> <div class="effect3"> <div class="imagezoom"> <img src="1.jpg" /> </div> </div> <div class="effect3"> <div class="imagezoom"> <img src="2.jpg" /> </div> </div> </div>
<style type="text/css"> .effect3 { float:left; margin-left:10px; cursor:pointer; -webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); -moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); box-shadow: 0px 0px 20px 0px rgba(184,184,184,1); transition: all ease-in-out 0.3s; overflow:hidden; } .effect3 img { width:200px; height:120px; } .effect3:hover .imagezoom { -webkit-transform: scale(1.5); transform: scale(1.5); } .imagezoom { width: 100%; height: 100%; transition:all ease-in-out 0.3s; cursor:pointer; } </style>
Leave a Reply