CSS Horizontal Flip Image Widget

Cascading Style Sheets or CSS can be easily used to add attractive effects to images in your site. Some times you may wonder how the image flipping is done along with the text display. Here is the simple widget code for creating such effect using HTML and CSS.

Widget Features

• Create an image effect with a horizontal flipping style.
• Display an image which flips horizontally when the mouse is moved over.
• A text message is displayed when the mouse is on.
• The image will flip back when the mouse is taken out.

Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...

Code for Creating Horizontal Flip Image with Text Display

There are two parts to create such a horizontal flip image widget.

• HTML – This code is to be added in your web page where you want to display the image.
• CSS – This code is to be added in your CSS. It is recommended to add this code in your external style sheet to reduce the page loading speed. You can also add this along with the HTML code inline within a page which means just copy and paste the code along with HTML code on page.

Here is a HTML code, you can replace the target URL, image and display text of your own.

<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<a href=https://www.webnots.com/step-by-step-seo-tutorial/search-engine-optimization-guide/><Img src="https://img.webnots.com/2013/07/Search-Engine-Optimization-Guide.png">
</div>
<div class="backside"><br>
<p align=justify> <font face=arial size=5 color=brown>Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...</font>
</p></a> 
</div>
</div>
</div>

Here is a CSS code, you can customize the image size, rotation angle and background color according your need:

<style type="text/css">
/* Start: Suport for IE */
.image-flip:hover .backside, .image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

.image-flip:hover .frontside, .image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* End: Support for IE */

.image-flip:hover .backside, .image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

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

.image-flip, .frontside, .backside {
width: 300px;
height: 250px;
}

.mainflip {
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-ms-transition: 1s;
-moz-transition: 1s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: relative;
}

.frontside, .backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-o-transition: 1s;
-o-transform-style: preserve-3d;
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}

.frontside {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: grey;
z-index: 2;
}

.backside {
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

</style>