css hover effects | html css hover effects

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>