I am currently working on creating a dynamic card that expands and reveals additional information upon mouse rollover. The challenge I am facing is that the shadow effect remains visible when flipping the card, which disrupts the overall desired effect.
Here is a demo showcasing the issue: http://jsfiddle.net/dbPf4/14/
This is the basic HTML structure:
<div id=f1_container>
<input type="checkbox" id="button">
<label class="f1_card" for="button"><div class="front face"><img src="http://css3.bradshawenterprises.com/images/Cirques.jpg"></div><div class="back face center"><p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p></div></label></div>
And here is the CSS styling being applied:
#f1_container:hover,#f1_container:focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
#f1_container{
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-moz-transition:-moz-transform .15s linear;
.
.
.
.face.back {
display: block;
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-transform: rotateY(180deg);
-moz-box-sizing: border-box;
.
.
.