Animate hover effect for products

Developer
Mori
Size
3,137 Kb
Views
20,240
  1. Animate hover effect for products Previews
  2. Animate hover effect for products HTML Codes
  3. Animate hover effect for products CSS Codes
  4. Animate hover effect for products JS Codes

How do I make an animate hover effect for products?

What is a animate hover effect for products? How do you make a animate hover effect for products? This script and codes were developed by Mori on 26 October 2022, Wednesday.

Animate hover effect for products Previews
IQ Test

Animate hover effect for products - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>animate hover effect for products </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--product--> <table class="table-product" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%"> <div class="item"> <img src="https://source.unsplash.com/random/400x300"/> <div class="text"> <h3>AAA <p>apple</p> </h3> <div class="b-text">a</div> <section>aaaaa aaaa aaa</section> </div> </div> </td> <td width="25%"> <div class="item"> <img src="https://source.unsplash.com/random/400x300"/> <div class="text"> <h3>BBB <p>ball</p> </h3> <div class="b-text">i am hide words</div> <section>ball ball ball ballball ball</section> </div> </div> </td> <td width="25%"> <div class="item"> <img src="https://source.unsplash.com/random/400x300"/> <div class="text"> <h3>CCC <p>cccc</p> </h3> <div class="b-text"> CC<br> Cat<br><br> caaa<br> tttt<br> </div> <section>Cat Cat Cat Cat </section> </div> </div> </td> <td width="25%"> <div class="item"> <img src="https://source.unsplash.com/random/400x300"/> <div class="text"> <h3>DDD <p>dog</p> </h3> <div class="b-text">dog</div> <section>dog dog dog dog dogdog dog dog</section> </div> </div> </td> </tr> </table> <!--end: product--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animate hover effect for products - Script Codes CSS Codes

.table-product img, .table-product a:hover, .table-product .text { -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
}
/*table product*/
.table-product { width: 100%; margin-bottom: 20px; text-align: center;
}
.table-product td { margin: 0; padding: 10px 50px; vertical-align: top; border: 0;
}
.table-product img { opacity: 1; width: 170px; height: 210px; background: #ccc;
}
.table-product a:hover { opacity: 0.8;
}
.table-product h3 { margin: 0; /*to 0*/ line-height: 130%; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #999;
}
.table-product h3 p { font-size: 12px; margin: 0; line-height: 120%;
}
.table-product .pdf { margin-top: 10px;
}
.table-product .item { display: block; height: 530px; /**/ overflow: hidden; font-size: 13px; letter-spacing: 1px;
}
.table-product .text { position: relative; top: 0; height: 350px; /**/ overflow: hidden;
}

Animate hover effect for products - Script Codes JS Codes

 //----------pruduct img hover effect //(product-product) //fade effect func function changeBoxEffect(obj, opacity, top) { $(obj).children('img').css('opacity', opacity); $(obj).children('.text').css({"prosition":"relative","top": top}); }; $(function() { //----------pruduct img hover effect $(this).find('.b-text').hide(); $('.table-product .item').mouseenter(function(e) { changeBoxEffect(this, 0.1, "-120px"); /* $(this).children('img').css('opacity', 0.1); $(this).children('.text').css({"prosition":"relative","top":"-100px"});*/ $(this).find('section').fadeOut(0); $(this).find('.b-text').fadeIn(0); }); //img leave effect $('.table-product .item').mouseleave(function(e) { changeBoxEffect(this, 1, "0"); // $(this).children('img').css('opacity', 1); // $(this).children('.text').css({"prosition":"relative","top":"0"}); $(this).find('section').fadeIn(0); $(this).find('.b-text').fadeOut(0); }); }); /*pruduct img hover effect*/
Animate hover effect for products - Script Codes
Animate hover effect for products - Script Codes
Home Page Home
Developer Mori
Username moriko232
Uploaded October 26, 2022
Rating 3
Size 3,137 Kb
Views 20,240
Do you need developer help for Animate hover effect for products?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mori (moriko232) Script Codes
Name
FadeToggle
Menu item hover line effect
Scroll and change numbers
PACE loadding effect
Auto zoom in background
Tab menu style
Hover menu
Sticky menu
Hover line effect
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!