Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Flip Effect

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 312
    Comment on it

    Hello Everyone!!

    In this blog we are going to flip an image. The image has two side:-

    Front side:- Here is an image.

    Back side:- Here is some text.

    When the hover effect is apply to the image block the the back side text will appear. It is done by using css transform properties, we use the transform (rotate) properties to rotate the image block so the the back-side text will display on hover effect.

    Code:-  

    <body>
    <div class="flip">
    	<div class="flipper">
    		<div class="front">
    	<img src="">
    		</div>
    		<div class="back">
    			<p>flip effect</p>
    		</div>
    	</div>
    </div>

    CSS:-

    .flip-container {
    	perspective: 1000px;
    }
    .flip:hover .flipper, .flip-container.hover .flipper {
    		transform: rotateY(180deg);
    	}
    
    .flip, .front, .back {
    	width: 320px;
    	height: 480px;
    }
    .flipper {
    	transition: 0.6s;
    	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);
    }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: