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

Download Source Code