HTML
<div class="con">
<img src="1.jpg" class="test"/>
</div>
CSS
.test
{
height:200px;
width:200px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.test:hover
{
transform: scale(1.1);
cursor:pointer;
}
.con
{
height:200px;
width:200px;
background-color:#FF0000;
overflow:hidden;
margin-left:20px;
}
Zoom With Rotation
.test
{
height:200px;
width:200px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.test:hover
{
cursor:pointer;
transform: rotate(5deg);
height:240px;
width:240px;
}
.con
{
height:200px;
width:200px;
overflow:hidden;
margin-left:20px;
}
Image Circle Transformation
.cir{
border:8px solid black;
-webkit-transition: all .5s; /* Safari */
transition: all .5s;
}
.cir:hover{
border-radius:50%;
transform: rotate(360deg);
}
Next Creativity
No comments:
Post a Comment