Simple Image Hover Effect with jQuery CSS CSS3 - Download Simple Image Hover Effect with jQuery and CSS/CSS3

Download Simple Image Hover Effect with jQuery and CSS/CSS3

By Posted on

This time I will share jQuery Plugin and tutorial about Simple Image Hover Effect with jQuery and CSS/CSS3, hope it will help you in programming stack.

Simple Image Hover Effect with jQuery CSS CSS3 - Download Simple Image Hover Effect with jQuery and CSS/CSS3
File Size: 2.38 KB
Views Total: 8776
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A simplest way to create a CSS3 animated, customizable overlay effect when users hovers over an element. jQuery is used only to make the overlay open / close on hover by toggling CSS classes.

How to use it:

1. Create an overlay element for the container ‘content’ following the markup structure like this:

view source
1 <div class="content">
2   <a class="box overlay" href="#">
3     <span class="image-caption">Image Caption</span>
4     <span class="desc overlay-toggle">
5       More description here
6       <span class="see-more">See more...</span>
7     </span>
8   </a>
9 </div>

2. Style the overlay.

view source
01 .box {
02   display: inline-block;
03   width: 370px;
04   height: 270px;
05   transition: all ease-in 0.3s;
06 }
07  
08 .box:hover { background-color: rgba(0,0,0, 0.5); }
09  
10 .box:hover .image-caption {
11   background-color: transparent;
12   margin-top: 40px;
13 }
14  
15 .image-caption {
16   position: absolute;
17   display: inline-block;
18   width: 370px;
19   text-align: center;
20   padding: 20px 0;
21   color: #ffffff;
22   text-transform: uppercase;
23   font-family: Helvetica, Arial, sans-serif;
24   font-size: 20px;
25   text-shadow: 0px 2px 2px rgba(0,0,0,0.8);
26   margin-top: 207px;
27   background-color: rgba(0,0,0,0.7);
28   transition: all ease-in 0.3s;
29 }
30  
31 .desc {
32   position: absolute;
33   width: 370px;
34   margin-top: 150px;
35   text-decoration: none;
36   text-align: center;
37   font-family: Georgia, serif;
38   font-style: italic;
39   font-size: 14px;
40   line-height: 1.4;
41   color: transparent;
42   text-shadow: 0px 2px 2px rgba(0,0,0,0);
43   transition: all ease-in 0.3s;
44 }
45  
46 .see-more { text-decoration: underline; }

3. Add a background image to the ‘content’

view source
1 .content {
2   display: inline-block;
3   width: 370px;
4   height: 270px;
5   background: url(bg.jpg) no-repeat;
6   background-size: 370px 270px;
7 }

4. Customize the CSS styles of your overlay on mouse hover.

view source
1 .on {
2   color: #ffffff;
3   text-shadow: 0px 2px 2px rgba(0,0,0,0.8);
4 }

5. Apply the ‘on’ CSS class to the overlay on hover. Insert the following JavaScript snippet after jQuery library and we’re done.

view source
1 $(".overlay").hover(
2   function() {
3     $(".overlay-toggle").toggleClass("on");
4   }
5 );

This awesome jQuery plugin is developed by thomashardy. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: