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