Wednesday, 30 May 2018

Image zoom inside of div






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