As you know that hover effect converts a simple image of a product or portfolio to very attractive. A hover effect is very useful in listing of any kind of content with images. Here awe are going to elaborate the feature of hover effect but without any use of jquery.
We are going to implement it by using HTML5, CSS3 and this would improve your page speed because we are not trigerring any jquery script on hover of image of content. Here are steps to implement this feature :
Step 1: HTML Code Format
In this step, we have to take care about layout of our HTML code. Here we have mentioned a snippet of HTML code which we are following as base code to implement this hover effect. Let's have a look at html code.
<ul id="products-listing">
<li>
<div class="etuts-wrapper">
<div class="etuts-item">
<div class="etuts-item-content">
<div class="etuts-item-image">
[img src="assets/img/01.jpeg" alt="Product 01" ]
</div>
<div class="etuts-item-detail hide">
<div class="etuts-item-brief">
<p>Custom Mens Polo T-Shirts<br/><span>Rs.400.00</span></p>
</div>
<div class="etuts-item-btn">
<a href="https://google.com" target="_blank">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
In above mentioned code, we have created unformatted product list. In this list we have two major div elements i.e.images & detail of product. By using css, we are hiding detail of product initially but showing with animation effects on hover of product item. For further elaborating logic behind this, please have a look at step 2 i.e. CSS csript.
Step 2: CSS Script
After HTML code, we are moving to CSS3 script. In this script, we have added some CSS3 attributes for completing of required functionality without using jquery code. Here is CSS script :
ul#products-listing{list-style: none; padding: 0px;border: 1px solid #333; display: flex; box-shadow: 0px 0px 8px #333;}
ul#products-listing li{width:22%; float:left;margin: 20px; cursor:pointer;}
ul#products-listing li .etuts-wrapper .etuts-item-content .hide1{display:none;}
ul#products-listing li .etuts-wrapper .etuts-item-content .show1{display:block;}
ul#products-listing li .etuts-wrapper .etuts-item-content .etuts-item-image img{width: 213px; height: 213px;}
ul#products-listing li .etuts-wrapper .etuts-item-content .etuts-item-detail { position: absolute; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background: rgba(0,0,0,0.4); color: #fff; top: 100%; -webkit-transition: all 0.5s ease-in 0s; -moz-transition: all 0.5s ease-in 0s; -o-transition: all 0.5s ease-in 0s; transition: all 0.5s ease-in 0s; }
ul#products-listing li .etuts-wrapper:hover .etuts-item-content .etuts-item-detail {top: 0;}
ul#products-listing li .etuts-wrapper .etuts-item-content { position: relative; overflow: hidden; border: 12px solid #00AFEC; border-left: 12px solid #25819f !important; }
ul#products-listing li .etuts-wrapper .etuts-item-content .etuts-item-detail .etuts-item-brief p{text-align: center; font-size: 20px;}
ul#products-listing li .etuts-wrapper .etuts-item-content .etuts-item-detail .etuts-item-brief p span{font-weight:bold;}
ul#products-listing li .etuts-wrapper .etuts-item-content .etuts-item-detail .etuts-item-btn{text-align:center;}
ul#products-listing li .etuts-wrapper .etuts-item-content .etuts-item-detail .etuts-item-btn a{padding: 8px 16px; background:#007bff; color:#fff; text-transform: uppercase; border-radius: 60px; font-weight: bold;}Now, you are ready to get results of hover effects without jquery code. You can also download this script by "Download" button given below.