I am trying to make a splash page of an image, slice it up into 8 equal parts (horizontally) and have each section translate to the right or left (alternating). I started to do it by making them into separate divs, but i had to apply padding to it to make it work, and when viewed at different resolutions there are gaps (or when resizing). What can i do to make this happen more efficiently?
CSS:
#wrap{
width: 100%;
height:100%;
}
#cabinet1 {
padding-bottom:80px;
}
#cabinet2{
padding-bottom:80px;
}
#page{
margin: auto;
margin-top: auto;
width: 800px;
}
#cabinet1:hover .move-right{
transform: translate(150px,0);
-webkit-transform: translate(150px,0); /** Chrome & Safari **/
-o-transform: translate(150px,0); /** Opera **/
-moz-transform: translate(150px,0); /** Firefox **/
}
#cabinet2:hover .move-left{
transform: translate(-150px,0);
-webkit-transform: translate(-150px,0); /** Chrome & Safari **/
-o-transform: translate(-150px,0); /** Opera **/
-moz-transform: translate(-150px,0); /** Firefox **/
}
.section {
position: absolute;
transition: all 1s ease-out;
-webkit-transition: all 1s ease-out; /** Chrome & Safari **/
-moz-transition: all 1s ease-out; /** Firefox **/
-o-transition: all 1s ease-out; /** Opera **/
}
.button{
background: url(images/enterbutton.png);
width: 108px;
height: 468px;
font-size: 18px;
font-family: "urbana-1","urbana-2",sans-serif;
letter-spacing: 1.25px;
text-shadow: 0px 0px 1px rgba(68,68,68,0.34);
cursor: pointer;
}
img{
width: 60%;
}
