Pitch your project

Random text


By admin Category Uncategorized, Posted February 12th, 2016
Pure CSS flip effect on your images

If you want to give your images a nice effect, but you also want them to have a description you can add the flip effect on them.

First steps.

Lets build the html first and add the description of the backside of the image, and give it the class back like below.

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <img src="http://36.media.tumblr.com/85080751d9a32acc0047d04b63b145a0/tumblr_n1aukhQupj1s489wio1_1280.jpg" alt="front"/>
        <div class="back">
            <h2>Hi my name is Link</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam rhoncus vulputate. Integer laoreet dignissim luctus. In    rhoncus orci sed lacus congue egestas. Quisque sagittis tortor a quam rhoncus, vitae dignissim eros viverra. Nam convallis, massa gravida consectetur iaculis, sem nibh aliquet quam.</p>

Lets add the turn effect on the hover in our CSS.

2. Hover and turn in the CSS.

Add the following to your CSS:

.flip-container { perspective: 1000; } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .front{ background-color: #9d6fa5; } .back{ background-color: #8fba4a; color: #ffffff; text-align: center; } .back p{ font-size: 12px; margin: 30px 200px 0px 200px; } .back h2{ text-transform: uppercase; font-size: 18px; border-bottom: 1px solid #ffffff; margin: 30px 200px 0px 200px; } .flip-container, .front, .back { width: 1000px; height: 528px; } .flipper { transition: 0.5s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; transform: rotateY(0deg); } .back { transform: rotateY(180deg); }

If you followed the code you should end up with the turning image, on the front you will see your image or in my case Link from Zelda, and on the back I have my description.

Posted by Randy Gootjes

Leave a Reply

Your email address will not be published. Required fields are marked *