circleWithImage

by Mehmet Yener

HTML

<div class="circle">
    
    
</div>

CSS

.circle{
    -moz-border-radius: 100px/100px;
    -webkit-border-radius: 100px 100px;
    border-radius: 100px/100px;
    background:url('http://www.erenyener.com/img/gulsaheren.jpg') ;
    background-size:50px 50px;
    width:100px;
    height:100px;
    position:absolute;
    margin-left:150px;
    margin-top:100px;
    transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    opacity:0.9;
}

.circle:hover{
    opacity:1.0;
     background: url('http://www.erenyener.com/img/gulsaheren.jpg'); 
    background-size:200px 200px;
    width:200px;
    height:200px;
     -moz-border-radius: 0px/0px;
    -webkit-border-radius: 0px 0px;
    border-radius: 0px/0px;
    position:absolute;
    margin-left:100px;
    margin-top:50px;
    background-color:aqua;
    transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;    
}