Tuesday, 30 April 2013

Image Animation Card Flip CSS

Design du Jour
Design du Jour

This is possibly my favourite effect for images!

It's a simple little bit of CSS and HTML which creates the above effect. I decided it looks great flipping a business card, so I designed one for the site... what do you think?

Ok, so lets cut to the chase.

The CSS:

<style>
.flip-container {

-webkit-perspective: 1000;
-moz-perspective: 1000;

-o-perspective: 1000;

perspective: 1000;

border: 6px groove #898989;
}

.flip-container:hover .flipper, 
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 350px;
height: 200px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}

.front {
background: none 0 0 no-repeat;
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: none;
}


</style>



Tweaking the CSS

The only changes you have to make to the code above is applying the flip dimensions (width and height), and a border if you choose to have one.

This effect works so well if you have two images of the same size (dimensions). In the code above, change width: 350px; height: 200px; to the dimensions of your images.

In the code above, please edit border: 6px groove #898989; to whatever kind of border you would like. For a thicker border, change 6px to 7pc, 8px or 9px. And again, for a thinner border, change 6px, to 5px, 4px or 3px. Options for the shape of your border are solid, dotted, dashed, outset, inset, groove, double or ridge. #898989 is the colour I have chosen in the border above. You can simply replace #898989 with words for basic colours, like "white" or "black" or "pink" (e.g. border: 6px groove white;
), or you can visit my post HERE for a comprehensive list of Hex Colour Codes.



Where to put the CSS:

Before proceeding, please see my post on how to back up your blogger blog HERE. As you are editing the fundamental code of your blog, a backup is vital, especially if you are new to this. So you can restore the previous version of your blog.

Now copy your code with the edits you made, and go to...

Template →
Edit HTML →
Click in the coded section →
Press Ctrl "f" to open up the find box→
Type </head> into the find box and hit enter→
Paste your code above the </head> tag you have found in the coded section→
Click Save Template.



The HTML:


<center>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <center><a href="SITE TO LINK TO ON CLICK" title="TEXT TO APPEAR WHEN YOU HOVER OVER THE EFFECT" target="_blank"><img src="TOP IMAGE URL" alt="TOP IMAGE NAME" style="border: none" width="350"/></a></center>
    </div>
    <div class="back">
                  <center><a href="SITE TO LINK TO ON CLICK (SAME AS ABOVE)" title="TEXT TO APPEAR WHEN YOU HOVER OVER THE EFFECT (SAME AS ABOVE)" target="_blank"><img src="BOTTOM IMAGE URL" alt="BOTTOM 
IMAGE NAME

" style="border: none" width="350"/></a></center>


    </div>

  </div>

</div>
</center>


Tweaking the HTML


SITE TO LINK TO ON CLICK: URL of website you would like your visitor to go to. It must be the same in both instances in the above code.

TEXT TO APPEAR WHEN YOU HOVER OVER THE EFFECT: This will be the words which appear when you hover over the effect, again it must be the same in both instances in the code above.

TOP IMAGE URL: This is the image URL which rests on the upturned card.

TOP IMAGE NAME: This is the name of your top image.

border: none: This is the option to have a border around each seperate image, in each instances of the code above. Please see the section of the post above, which deals with border styling.

350: this is the width of your top image in pixels. For the best effect, both images should be the same dimensions, therefore the width in the two instances above, should be the same.

BOTTOM IMAGE URL: This is the image URL which rests on the turned down side of the card.

BOTTOM IMAGE NAME: This is the name of your bottom image.



Where to put the HTML:

The completed code can be put in either the HTML section of your post editor or as a new Java/ HTML gadget/widget.

That's it folks!

You now have a great flipping image effect on your blog!

If you have any questions, please either comment below or mail me.

Cheers

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me