Filemón CSS Zoom
by JuanMa
HTML
<div class="filemon">
<div class="camisa1"></div>
<div class="camisa2"></div>
<div class="pelos"></div>
<div class="oreja oreja-dch"></div>
<div class="cabeza">
<div class="boca"></div>
</div>
<div class="cejas"></div>
<div class="ojo-iz"></div>
<div class="ojo-dch"></div>
<div class="nariz"></div>
<div class="oreja oreja-izq"></div>
<div class="firma">OLMID</div>
</div>
CSS
.filemon{
position: relative;
width: 500px;
height: 500px;
top: -200px;
left: -200px;
border: 1px solid #000;
overflow:hidden;
background: #f6e6b4;
background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017));
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%);
background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%);
background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%);
background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 );
-webkit-transform : scale(0.2);
-moz-transform : scale(0.2);
-ms-transform : scale(0.2);
-o-transform : scale(0.2);
transform : scale(0.2);
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
transition: 2s;
}
.filemon:hover{
top: 130px;
left: 130px;
-webkit-transform : scale(1.5);
-moz-transform : scale(1.5);
-ms-transform : scale(1.5);
-o-transform : scale(1.5);
transform : scale(1.5);
}
.filemon .cabeza{
position: absolute;
width: 260px;
height: 385px;
top: 55px;
left: 115px;
border-left: 12.5px solid #000;
border-top: 10px solid #000;
border-right: 2px solid #000;
border-bottom: 5px solid #000;
border-radius: 100% 100% 110% 90% / 100% 100% 110% 90%;
overflow:hidden;
background: #fcd798;
background: -moz-linear-gradient(top, #fcd798 0%, #ee8e54 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd798), color-stop(100%,#ee8e54));
background: -webkit-linear-gradient(top, #fcd798 0%,#ee8e54 100%);
background: -o-linear-gradient(top, #fcd798 0%,#ee8e54 100%);
background: -ms-linear-gradient(top, #fcd798 0%,#ee8e54 100%);
background: linear-gradient(to bottom, #fcd798 0%,#ee8e54 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd798',...