<div class="flip-cards card-shadow rMargin">
<div class="front-card">
<div class="frow column-center">
<div class="aSVGIcon">
<svg class="[types field='svgscale' output='raw'][/types]" fill="#58595B" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">[types field='svg-paths' output='raw'][/types]
</svg>
</div>
<div class="cbenTitle">
[wpv-post-title]
</div>
</div>
</div>
<div class="reverse-card" id="[wpv-post-id]">
<p class="cbenText">[wpv-post-body view_template="None"]</p>
</div>
</div>
.centerIt{
margin: 0 auto;
}
.rMargin{
margin-right:5px;
}
.flip-cards
{
width:200px;
height:200px;
position:relative;
/*background:#BBBDC0;*/
/*margin-left:5px;*/
/*margin-right:auto;*/
-webkit-transition: all 1s ease;
transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.flip-cards:hover
{
transform: rotateY( 181deg );
-webkit-transform: rotateY(181deg);
-moz-transform: rotateY(181deg);
background:transparent;
}
.flip-cards div
{
width:200px;
height:200px;
position:absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.front-card
{
z-index: 2;
background:#BBBDC0;
position:relative;
padding:0;
}
.reverse-card
{
-webkit-transform: rotateY(181deg);
transform: rotateY( 181deg );
-moz-transform: rotateY( 181deg );
background:#C64A4F;
color:white;
padding:10px;
}
.aSVGIcon{
}
.cbenTitle{
margin-top:75%;
color:#58595B;
text-align:center;
font-size:0.7em;
text-transform:uppercase;
}
.asvgScale{
transform: scale(0.5);
}
.lgScale{transform:scale(0.5);}
.mdScale{transform:scale(0.4);}
.smScale{transform:scale(0.3);}
.reverse-card p {
font-size:0.8em;
}
ASKER
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
TRUSTED BY
ASKER
Very glad to have your help... The site is due to launch over the weekend - at taliance.com.
If we can't find a solution to make it work in FF, then I'm guessing we'll need to configure a different block with some other reveal effect on conditional display for FF users. Doable, of course, but a shame... :)
Tim