Skip to content

Instantly share code, notes, and snippets.

@marcobarbadoro marcobarbadoro/stile
Last active Aug 29, 2015

Embed
What would you like to do?
+ 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" />&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>
@marcobarbadoro

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.