Mortadelo CSS Zoom

by JuanMa

HTML

<div class="mortadelo">
	<div class="camisa"></div>
	<div class="corbata2"></div>
	<div class="corbata1"></div>
	<div class="cuello"></div>
	<div class="cabeza">
		<div class="boca"></div>
	</div>
	<div class="cejas"></div>
	<div class="ojo-dch">
		<div class="parpados"></div>
	</div>
	<div class="ojo-iz">
		<div class="parpados"></div>
	</div>
	<div class="nariz"></div>
	<div class="gafas"></div>
	<div class="oreja"></div>
	<div class="firma">OLMID</div>
</div>

CSS

.mortadelo{
	position: relative;
	width: 500px;
	height: 500px;
	top: -200px;
	left: -200px;
	border: 1px solid #000;
	overflow:hidden;background: #5fc918;
	background: -moz-linear-gradient(top,  #5fc918 0%, #1e8c00 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5fc918), color-stop(100%,#1e8c00));
	background: -webkit-linear-gradient(top,  #5fc918 0%,#1e8c00 100%);
	background: -o-linear-gradient(top,  #5fc918 0%,#1e8c00 100%);
	background: -ms-linear-gradient(top,  #5fc918 0%,#1e8c00 100%);
	background: linear-gradient(to bottom,  #5fc918 0%,#1e8c00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fc918', endColorstr='#1e8c00',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;
}
.mortadelo: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);
}
.mortadelo .cabeza{
	position: absolute;
	width: 278px;
	height: 207px;
	top: 28px;
	left: 35px;
	border-left: 10px solid #000;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	border-radius: 100% 90% 160% 50% / 100% 120% 100% 100%;
	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',...