There are many CSS properties to beautify your images. In our other article, we have explained different image hovering effects with CSS. Overlaying effect is another way of making images attractive on your site. In this article, we will explore how to create a CSS overlay effect on hover for creating sliding captions, titles, descriptions and buttons on images.
We will have 8 different styles for content sliding on images 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
Before we start, the prerequisite for a breadcrumb is to keep your pages in a structured manner. Though there is no need of arranging pages as per the breadcrumb we strongly recommend to do maintaining the needed hierarchy under the “Pages” tab and aligning your navigation accordingly. We will explain with an example structure as “Home > Site Building > Weebly > Weebly Tips & Tricks > This Page”. This needs five blocks with corresponding links to create a breadcrumb.
There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.
Table of Contents
Features:
- Light Weight.
- Pure CSS Code.
- Cross Browser.
- No External Files.
- Fully Customizable.
- Responsive.
How To Add 8 Stylish And Awesome CSS Image Overlay Effects?
There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.
CSS:
<style>*{box-sizing:border-box}
.panel{width:400px;height:350px;overflow:hidden;margin:5px;border:1px solid #000;box-shadow:0 0 15px 0 #666,0 5px 15px 0 #000;margin-bottom:60px}
.overlay{width:100%;height:100%;background:rgba(0,0,0,0.45);position:relative;-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);padding:16px;color:#fff;overflow:hidden;text-shadow:1px 1px 5px #673AB7}
.overlay .heading{font-size:30px;font-style:italic;text-align:center;color:#fff;padding:20px}
.panel .overlay .desc{line-height:30px;position:relative;font-size:16px;overflow:hidden}
.overlay .btn{padding:10px;margin:10px;background:#CFC;float:right;border-radius:3px}
.btn a{color:#333;text-decoration:none}
.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}
.panel:hover .left{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);left:0}
.panel:hover .right{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);right:0}
.panel:hover .top{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);top:0}
.panel:hover .bottom{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);bottom:0}
.panel:hover .top-left{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);top:0;left:0}
.panel:hover .top-right{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);top:0;right:0}
.panel:hover .bottom-left{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);bottom:0;left:0}
.panel:hover .bottom-right{-webkit-transition:all .4s cubic-bezier(.99,.99,0,.61);-moz-transition:all .4s cubic-bezier(.99,.99,0,.61);-o-transition:all .4s cubic-bezier(.99,.99,0,.61);transition:all .4s cubic-bezier(.99,.99,0,.61);bottom:0;right:0}</style>HTML:
<!-- 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>Customization:
No need to customize it. Just copy-paste. Rest edit the code as per comments and need. Remember to add JavaScript after HTML code.
Troubleshooting the Errors:
Do it with concentration and patience. Check your all steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.
Final Words:
That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.
Be the first to write a comment.