Hey guys,
Im trying to build a simple 3D pop over thingy, >update (see hot link below in other comment for view )< when I roll over an image - the image lifts like a trap door, and reveals the accompanying text underneath. So I have built it thus far .. For starters - the animation hovers are all over the place although they are set to be the same times - it makes syncing animations real sucky...
Anyone up for turning this into something cool?
HTML
CSS
.shadow{
background-image: -webkit-gradient(linear,
left top, left bottom,
from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)),
color-stop(1,#000));
}
.flipper{
overflow:hidden;
width:150px;
height:300px;
background:black;
-webkit-transition: all 1s;
box-shadow: 0px 0px 0px rgba(0,0,0,.4);
.door{
position:absolute;
-webkit-transition: all .3s linear;
-webkit-transform-origin:0% 0;
background:url(img/flip.jpg);
width:150px;
height:300px;
}
.trap{
position:relative;
-webkit-transition: all .3s linear;
width:150px;
height:50px;
background:blue;
margin-top:300px;
text-align:center;
line-height:50px;
}
.shadow{
-webkit-transition: all .3s linear;
width:150px;
height:0px;
position:absolute;
}
}
.flipper:hover{
box-shadow:0px -5px 10px rgba(0, 0, 0, 0.4);
.door{
-webkit-transform:rotateX(34deg);
}
.trap{
margin-top:250px;
}
.shadow{
height:250px;
}
}
SORRY – JUST DOING IT IN WEBKIT
