+ and - buttons to zoom in and out a div.   with a time of transition. With a simple script and short in a single html page

stile

@charset "utf-8";
/* CSS Document */

.cont {
	height: 339px;
	width: 340px;
	margin: 0 auto;
	padding-left: 0px;

}

.btn1 {
	height: 34px;
	width: 34px;
	background-image: url(http://www.canducci1940.it/theme/Grill/images/piu.png);
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	z-index: 10;
	border-radius: 1px;
background-color: transparent; 
}
.btn2 {
	height: 34px;
	width: 34px;
	background-image: url(http://www.canducci1940.it/theme/Grill/images/meno.png);
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	z-index: 10;
	border-radius: 1px;
background-color: transparent; 
}

.btn1:hover {
 height: 34px;
	width: 34px;
	background-image: url(http://www.canducci1940.it/theme/Grill/images/piu.png);
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	z-index: 10;
	border-radius: 1px;
opacity: 0.5;
background-color: transparent; 
}
.btn2:hover {
 height: 34px;
	width: 34px;
	background-image: url(http://www.canducci1940.it/theme/Grill/images/meno.png);
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	z-index: 10;
	border-radius: 1px;
opacity: 0.5;
background-color: transparent; 
}
.rinpiccioliamo {
	-webkit-animation-name: cssAnimation;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: cssAnimation;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: forwards;
	z-index: 1;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
to {
-webkit-transform: rotate(0deg) scale(1.70) skew(0deg) translate(-50px,-10px);
}
}

@-moz-keyframes cssAnimation {
from {
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
to {
-moz-transform: rotate(0deg) scale(1.70) skew(0deg) translate(-50px,-10px);
}
}


.ingrandiamo {
-webkit-animation-name: cssAnimatio;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: cssAnimatio;
-moz-animation-duration:1s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: forwards;

}
@-webkit-keyframes cssAnimatio {
from {
-webkit-transform: rotate(0deg) scale(1.70) skew(0deg) translate(-50px,-10px) ;
}
to {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
}
@-moz-keyframes cssAnimatio {
from {
-moz-transform: rotate(0deg) scale(1.70) skew(0deg) translate(-50px,-10px);
}
to {
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
}
.ingrandimento {
	height: 100px;
	width: 400px;
	z-index: 1;
	text-align: right;
}
#grande {
	height: 297px;
	width: 329px;
	z-index: 1;
	float: right;
	position: absolute;
	left: 352px;
	top: -9px;
}
.bottoni {
	height: 138px;
	width: 53px;
	z-index: 200;
	position: absolute;
	left: 334px;
	top: 160px;
}	

zoom-onclick

<div class="cont">
	<div id="grande" style="top: 450px; left: 91px; height: 220px;"><img alt="" src="http://www.marcobarbadoro.it/blog2/data/uploads/loghi/logo-agriturismi.png" style="width: 425px; height: 227px;" /></div>
	<div class="bottoni" style="top: 600px; height: 36px; left: 222px; width: 156px;"><input class="btn1" onclick="ani()" type="button" />&nbsp;<input class="btn2" id="rimpiccolisci" onclick="oni()" type="button" /></div>
	<script type="text/javascript">
        function ani(){
            document.getElementById('grande').className ='rinpiccioliamo';
			
        }
		  function oni(){
            document.getElementById('grande').className ='ingrandiamo';
			
        }
  </script>

you can view the demo on my blog
http://www.marcobarbadoro.it/blog2/index.php?id=blog&post=ingrandiamo-qualsiasi-div-con-una-semplice-funsione