How to Add Vertical Image Flip Widget in Weebly Site?

In our previous article we have seen how to add horizontal image flip widget on your site. In this article we will share step by step instructions on how to add vertical image flip widget in Weebly site. The widget will look like below, move your mouse over and see the flipping effect.

Vertical Image Flip Widget

The widget will look like below.

CSS for Vertical Image Flip Widget

Basically we create two classes .common and .flip-hide to position the image and for hovering effects. An additional .flip-text class is used to style the text behind the image. According to the size of your image, you should adjust the font-size and line-height of the “.flip-text p” class to make the text is aligned properly behind the image area.

The complete CSS is as below:

<style>
.common{
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.flip-text {
position: absolute;
text-align: center;
background: rgba(33, 150, 243, 0.4);
z-index: 999;
width: 100%;
max-height: 100%;
overflow: hidden;
top: 50%;
-webkit-transform: translate3d(-100%, -50%, 0);
transform: translate3d(-100%, -50%, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
line-height: 30px;
font-size: 16px;
}
.flip-text p {
margin: 20px;
font-size: 24px;
line-height: 60px;
}
.flip-text button {
background-color: #E91E63;
border-radius: 5px;
margin: 10px;
padding: 10px;
color: white !important;
}
.flip-text button a{
color: white;
text-decoration: none;
}
.flip-hide{
overflow: visible;
perspective: 900px;
}
.flip-hide img{
position: relative;
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: 100;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-hide .flip-text{
opacity: 1;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
-moz-transform: rotateX(180deg) translate3d(0,0,0);
-webkit-transform: rotateX(180deg) translate3d(0,0,0);
transform: rotateX(180deg) translate3d(0,0,0);
}
.flip-hide:hover img{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.flip-hide:hover .flip-text{
-moz-transform: rotateX(360deg) translate3d(0,0,0);
-webkit-transform: rotateX(360deg) translate3d(0,0,0);
transform: rotateX(360deg) translate3d(0,0,0);
}
</style>

HTML for Vertical Image Flip Widget

The HTML code is given as below. You should replace the image URL and the text with your own content.

<div class="common flip-hide">
<img src="https://img.webnots.com/2016/01/sample-image.jpg" alt="Flip and Hide Image"> 
<div class="flip-text"><p>Here is the short description to show on the flip. Adjust the content according to your image height to look uniform and aligned.</p><button><a href="#">Get more details..</a></button></div>
</div>

How to Add the Widget in Weebly?

You can insert this widget in Weebly in the following two methods:

• Using Embed Code Element – Paste the complete CSS and HTML code inside an embed code element on your page. Ensure to add the opening and closing style tags in CSS.
• Using Header Code Section – In this method, copy the CSS along with opening and closing style tags and paste under “Pages > Choose the Page > SEO Settings > Header Code” section. Paste the HTML code on the same page using an embed code element.

Publish your site and see the vertical image flip widget works on the page. You can place the embed code elements side by side and create a beautiful gallery showcasing effect like below: