How To Add 3D Flip Effect To An Image In Blogger Using CSS3
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.
How To Add 3D Flip Effect To An Image In Blogger Using CSS3
- Actually i have made it very simple for you guys , you just have to add your image link in the script .
- First of all Go To Post Section , Click on Create Post and then switch into HTML Section copy the below script and paste it over there.
<div class="profile-image">
<div class="flip-3d">
<figure>
<img src="yourimage.jpg" />
<figcaption>Caption text goes over here!</figcaption>
</figure>
</div>
</div>
____________________________________________
- Replace yourimage.jpg with your desired image url.
- and in the figcaption tags add the text you want to appear on hovering the image.
- Now Just Copy the below CSS code and paste it just below the above script
_____________________________________________
<style>
.profile-image {
margin-bottom:20px;
}
div.flip-3d {
perspective: 1200px; width: 100%; float: left;
}
div.flip-3d-skills {
perspective: 1200px; width: 100%; float: left;
}
div.flip-3d figure {
position: relative;
transform-style: preserve-3d;
transition: 1s transform;
font-size: 1.6rem;
}
div.flip-3d figure img {
width: 100%;
}
div.flip-3d figure figcaption {
position: absolute;
width: 105%; height: 50%; top: 0;
transform: rotateY(.5turn) translateZ(1px);
background: rgba(255,255,255,0.9);
text-align: center;
padding-top: 45%;
opacity: 0.6;
transition: 1s .5s opacity;
}
div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>
________________________________________________
You can also play with the different properties and selectors of CSS by changing the above Code , but if you are new to CSS just add the image url and caption text , don't edit it if you are new to programming!
Category: Tutorials
0 comments