How Add Perspective Image Hover Effect in Weebly?

You may be using lot of images on your Weebly site but wanted to highlight only important images to the users in different way to attract them. For example, you can create a showcase portfolio page and display the images of your work on projects, photography, videos, etc. Adding perspective hover effect to such portfolio images grab the user’s attention and improves the engagement. In this article we show how to add perspective hovering effect to images on your Weebly site. You can simply copy paste the code on your site and replace image URLs with your own.

Perspective Image Hover Effect

It is difficult to explain how the perspective hovering effect will look like. The best option is to visually show and below is an example of the image with hovering effect. You can move the mouse over the image to see the perspective hovering effect.

Note: This widget is primarily designed for desktop devices. If you want to use this widget on mobiles, make sure not to link the image and use smaller size image that can align properly in small screen.

How to Add Perspective Hovering Effect to an Image?

You can create the widget using CSS without any JavaScript. The process consist of three simple steps:

• Uploading image to your Weebly site
• Adding CSS Code
• Adding HTML Code

Let us explain each step in detail so that you can follow the instructions.

Step 1 – Uploading an Image

First step is to prepare the image that you want to add perspective hovering effect. You can find free images from public domains or create your own images using tools like Photoshop or Snagit. You can also use images from Weebly, however, the copyright information will be added when you do that.

• Login to your Weebly account and edit the site you want to add the widget.
• When you are in Weebly editor, navigate to “Theme” section and click on “Edit HTML / CSS” button showing on the lower left corner of the screen. Unfortunately, Weebly hide the visibility of this button hence you may need to zoom in to view the button clearly.
• Clicking on “Edit HTML / CSS” button will take to Weebly code editor where you can modify the source code of your site. However, we do not need to modify the code but need to upload an image.
• Click on the + button available next to “Assets” and then select “Upload File(s)” option.
• Upload the image you want to add hover effect.

• The URL of the uploaded image should be like below:

https://yoursitename.weebly.com/files/theme/image-name.jpg
or
https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/218853455352650432/files/image-name.jpg

• You can also simply select the uploaded image file and right click on the image showing on the right pane to copy the image address.

Now, click “Save” button showing on the top right corner to save your changes. If this is the first time you make changes in the code editor, you need to provide a name for your theme and save it.

Step 2 – Adding CSS Code for Hover Effect

Next, step is to create CSS for showing perspective image hover effect on the uploaded image. Go to “Pages” section in Weebly editor and select the page in which you want to add the widget. Click on “SEO Settings” button for that page and go to the bottom of the settings section. We have prepared the CSS code for you, what you need is to copy and paste the code under “Header Code” section. Make sure to replace the image URL with the your own image URL from step 1.

<style type="text/css">
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
background: 
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
url("https://img.webnots.com/2015/07/Image-1.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
.thumb a:after {
content: ''; position: absolute; left: 0; bottom: 0; 
width: 100%; height: 36px;
background: inherit; background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg); transform-origin: bottom;
}
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); 
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s; 
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
</style>

It should look like below in the editor:

Step 3 – Adding HTML

The final step is to add HTML to show the perspective image in your content area. Copy and paste the below code on the content area using an “Embed Code” element. Again, make sure to use the correct image URL from step in in your HTML.

<div class="thumb">
<a href="https://img.webnots.com/2015/07/Image-1.jpg">
<span>KungFu Panda</span>
</a>
</div>

The image may not be visible within the Weebly editor. Publish your site and hover the mouse on the image to see the perspective image effect is added to the image. If you are looking for showcasing social sharing icons on the image with perspective hover effect like below, then check this article to get complete code.