There are many CSS properties to beautify your images. In our other article, we have explained 11 different image hovering effects with CSS. Overlaying effect is another way of making images attractive on your Weebly site. In this article we will explore how to create CSS overlay effect on hover for creating sliding caption, title, description and button on images.
8 CSS Image Overlay Effects for Weebly Site
We will have 8 different styles for content sliding on image as listed below.
- Sliding from left to right
- From right to left
- From top to bottom
- From bottom to top
- Sliding from top-left to bottom-right
- From bottom-right to top-left
- From top-right to bottom-left
- From bottom-left to top-right
You can scroll down the page to view live demo of all these 8 styles.
How to Create Image Overlay in CSS?
There are three simple steps to add the widget to your Weebly site:
- Uploading Images or using external image links
- Adding CSS in “Header Code” section
- Adding CSS using “Embed Code” element
Step1 – Uploading Images
In this tutorial we used an image with 400px width and 350px height. You can use any dimensions and replace the same in the CSS by just replacing all occurrences of 400px and 350px with your image’s height and width. Upload your images on Weebly code editor under “Theme > Edit HTML/CSS > Assets” and the file path of an uploaded image will be like:
https://yoursite.com/files/theme/image.jpgYou can also use images from other sites or from other pages on your Weebly site by directly using the the image URLs.
Step2 – CSS for Image Overlay Effect on Hover
The widget has four elements as shown below and has 8 different styles of transitions.
- Image
- Title or Heading
- Description
- Button
Below is the complete CSS which needs to be added under “Header Code” section of your Weebly page .
- The image is placed inside a panel (.panel) with the same dimensions of the image ( 400px x 350px).
- The overlaying slider (.overlay) is created with CSS transition along with cubic-bezier() function.
- The overlaying slider has elements – title, description and a button (.heading, .desc and .btn).
- 8 styles with the classes – .left, .right, .top, .bottom, .top-left, .top-right, .bottom-left and .bottom-right.
- Each style has a hovering effect with corresponding classes like .panel:hover .left, .panel:hover .right, etc.
<style>
*{
box-sizing: border-box;
}
/* Image Panel or Container */
.panel{
width: 400px;
height: 350px;
overflow: hidden;
margin: 5px;
border: 1px solid #000;
box-shadow: 0px 0px 15px 0px #666, 0px 5px 15px 0px #000;
margin-bottom: 60px;
}
/* Image Overlay */
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.45);
position: relative;
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
padding: 16px;
color: #fff;
overflow: hidden;
text-shadow: 1px 1px 5px #673AB7;
}
/* Overlay Heading or Title */
.overlay .heading{
font-size: 30px;
font-style: italic;
text-align: center;
color: #ffffff;
padding:20px;
}
/* Overlay Description */
.panel .overlay .desc{
line-height: 30px;
position: relative;
font-size: 16px;
overflow: hidden;
}
/* Overlay Button */
.overlay .btn{
padding: 10px;
margin: 10px;
background: #CCFFCC;
float: right;
border-radius: 3px;
}
.btn a{
color: #333333;
text-decoration: none;
}
/* Overlay Styles - Ensure to use panel class dimensions */
.left{
left: -400px;
}
.right{
right: -400px;
}
.top{
top: -350px;
}
.bottom{
bottom: -350px;
}
.top-left{
top: -350px;
left: -400px;
}
.top-right{
top: -350px;
right: -400px;
}
.bottom-left{
bottom: -350px;
left: -400px;
}
.bottom-right{
bottom: -350px;
right: -400px;
}
/* Overlay Hover Styles */
.panel:hover .left{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
left: 0px;
}
.panel:hover .right{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
right: 0px;
}
.panel:hover .top{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
top: 0px;
}
.panel:hover .bottom{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
bottom: 0px;
}
.panel:hover .top-left{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
top: 0px;
left: 0px;
}
.panel:hover .top-right{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
top: 0px;
right: 0px;
}
.panel:hover .bottom-left{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
bottom: 0px;
left: 0px;
}
.panel:hover .bottom-right{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
bottom: 0px;
right: 0px;
}
</style>HTML for Image Overlay Effect on Hover
Add the below HTML inside an “Embed Code” element on your Weebly page. Each style has an inline image used as a background which you can replace with your own URLs from step 1. If you want to only use certain styles then use only that corresponding code block.
<!-- Overlaying Left to Right -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay left">
<h3 class="heading">Slide Left to Right</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>
<!-- Overlaying Right to Left -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay right">
<h3 class="heading">Slide Right to Left</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>
<!-- Overlaying Top to Bottom -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay top">
<h3 class="heading">Slide Top to Bottom</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>
<!-- Overlaying Bottom to Top -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay bottom">
<h3 class="heading">Slide Bottom to Top</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>
<!-- Overlaying Top-Left to Bottom-Right -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay top-left">
<h3 class="heading">Top-Left to Bottom-Right</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>
<!-- Overlaying Top-Right to Bottom-Left -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay top-right">
<h3 class="heading">Top-Right to Bottom-Left</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>
<!-- Overlaying Bottom-Left to Top-Right -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay bottom-left">
<h3 class="heading">Bottom-Left to Top-Right</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>
<!-- Overlaying Bottom-Right to Top-Left -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay bottom-right">
<h3 class="heading">Bottom-Right to Top-Left</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="#">Read more...</a></div>
</div>
</div>Points to Note
- In case if you want to use the overlaying effects on images throughout your site, then place the CSS code inside the “Header Code” section of your site under “Settings > SEO > Header Code” section. Or you can add the CSS under “main.less” file without the <style>…</style> tags.
- Now the HTML code block can be placed on any of your Weebly pages. For example, you can use “left to right” style on page1 and “bottom to top” style on page2.
- After embedded the code, the images on the editor may look scrambled but the published site will have proper display of images with overlaying effect.
Demo of CSS Image Overlay Widgets
Below is the live demo of all 8 widgets. In fact, you can use these widgets in any website like WordPress. This is a WordPress site and we have inserted the code using “Custom HTML” block to showcase the demo.
Leave a Reply
Your email is safe with us.