+ 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
@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; | |
} |
<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" /> <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
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