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