CSS3 animated hover effects for images
This code allows you to display an image and its description with animated CSS3 effect.
Note: If you would like to add your own text into the image description, just modify the code below or edit an existing code in the custom module of the demo template.
Example 1
<div class="view view-third">
<img src="/images/modules/delivery.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>
Example 2
<div class="view view-fifth">
<img src="/images/modules/guarantee.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>
Example 3
<div class="view view-eighth">
<img src="/images/modules/refund.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>
Example 4
<div class="view view-tenth">
<img src="/images/modules/support.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>
Example 5
<img class="border_img2" src="/images/modules/bottom2/boy.jpg" alt="Promotion" />
<div class="jm-mask-1"> </div>
<div class="jm-mask-2"> </div>
<div class="jm-mask">
<div>
<div>
<div>
<h3><a href="#">Top Stuff</a></h3>
<span class="jm-description">OFFER VALID UNTIL MARCH 20TH</span>
<span class="jm-price">$28</span>
<a class="jm-checkit" href="#">CHECK IT OUT!</a>
</div>
</div>
</div>
</div>
</div>
Image Borders
Headings
This is Heading One (h1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Two (h2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Three (h3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Four (h4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Five (h5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
This is Heading Six (h6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.
Numered blocks
01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
Colored blocks
this is a paragraph with the class "blue"
<p class="blue" > Text goes here</p>
this is a paragraph with the class "green"
<p class="green" > Text goes here</p>
this is a paragraph with the class "red"
<p class="red" > Text goes here</p>
this is a paragraph with the class "bluefill"
<p class="bluefill" > Text goes here</p>
this is a paragraph with the class "greenfill"
<p class="greenfill" > Text goes here</p>
this is a paragraph with the class "redfill"
<p class="redfill" > Text goes here</p>
Quote blocks
this is a paragraph with the class "quote-left"
<p class="quote-left" > Text goes here</p>
this is a paragraph with the class "quote-right"
<p class="quote-right" > Text goes here</p>
Icon blocks
this is a paragraph with the class "jmbadge"
<p class="jmbadge" > Text goes here</p>
this is a paragraph with the class "jmcalendar"
<p class="jmcalendar" > Text goes here</p>
this is a paragraph with the class "jmchat"
<p class="jmchat" > Text goes here</p>
this is a paragraph with the class "jmcheck"
<p class="jmcheck" > Text goes here</p>
this is a paragraph with the class "jmcloud"
<p class="jmcloud" > Text goes here</p>
this is a paragraph with the class "jmdirection"
<p class="jmdirection" > Text goes here</p>
this is a paragraph with the class "jmdivide"
<p class="jmdivide" > Text goes here</p>
this is a paragraph with the class "jmerror"
<p class="jmerror" > Text goes here</p>
this is a paragraph with the class "jmfire"
<p class="jmfire" > Text goes here</p>
this is a paragraph with the class "jmflag"
<p class="jmflag" > Text goes here</p>
this is a paragraph with the class "jmheart"
<p class="jmheart" > Text goes here</p>
this is a paragraph with the class "jmhome"
<p class="jmhome" > Text goes here</p>
this is a paragraph with the class "jminfo"
<p class="jminfo" > Text goes here</p>
this is a paragraph with the class "jmlist"
<p class="jmlist" > Text goes here</p>
this is a paragraph with the class "jmmail"
<p class="jmmail" > Text goes here</p>
this is a paragraph with the class "jmpeople"
<p class="jmpeople" > Text goes here</p>
this is a paragraph with the class "jmstar"
<p class="jmstar" > Text goes here</p>
this is a paragraph with the class "jmstat"
<p class="jmstat" > Text goes here</p>
Unordered lists
Default list
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Enter the class name to ul tag <ul class="jm-dark">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Enter the class name to ul tag <ul class="jm-light">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Ordered lists
Default list
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Enter the class name to ol tag <ol class="jm-roman">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Enter the class name to ol tag <ol class="jm-alpha">
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
Custom lists
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-account">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-cart">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-club">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-delivery">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-mastercard">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-secure">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-sizing">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-visa">
Social icons
<a class="jm-facebook" href="#"> </a>
<a class="jm-twitter" href="#"> </a>
<a class="jm-rss" href="#"> </a>
<a class="jm-google" href="#"> </a>
</p>
Read More Button
Enter the class name to a tag <a class="readmore" />
Read More Alternate Button
Enter the class name to a tag <a class="readmore2" />
Custom Layout
You can use the following code to create custom boxes in a single module position.
Note: You can use the following classes:
1) jm-box2 for 2 boxes in a row
2) jm-box3 for 3 boxes in a row
3) jm-box4 for 4 boxes in a row
4) Leave empty for 1 box only
<div class="jm-box">
<div class="jm-box-in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
</div>
</div>
</div>
Custom Services
Note: You can change icons by replacing the icon class. All classes for icons are listed in the "Custom lists" section in the "Typography" article.
<div class="jm-row">
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-club"><a href="#">ModernStore Club</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-account"><a href="#">My Account</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
</div>
<div class="jm-row">
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-sizing"><a href="#">Size Chart</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-cart"><a href="#">Terms of Service</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
</div>
</div>
ModernStore Club
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.My Account
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.Size Chart
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.Terms of Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.
Custom Categories
Note: If you remove the "jm-rounded" class, you will get the squares instead of the circles. This can be helpful if you have some longer category names.
<div class="jm-custom-box pink">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/girls.png" border="0" alt="Girls" /> <span class="category-name">Girls</span> </a></h2>
</div>
</div>
<div class="jm-custom-box blue">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/boys.png" border="0" alt="Boys" /> <span class="category-name">Boys</span> </a></h2>
</div>
</div>
<div class="jm-custom-box yellow">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/newborns.png" border="0" alt="Newborns" /> <span class="category-name">Newborns</span> </a></h2>
</div>
</div>
</div>
Custom Slide
This custom code you can use in a custom html module or as custom description for DJ-MediaTools slides.
<div class="jm-custom-slide">
<h3><a href="#">Stylish Shorts</a></h3>
<span class="jm-slide-price">$59</span>
<span class="jm-slide-desc">offer valid until March 20th</span>
<p><a class="readmore" href="#">Readmore</a></p>
</div>
Custom Discount
<div class="jm-custom-left"><img src="/images/modules/model.jpg" alt="Model" /></div>
<div class="jm-custom-right">
<p><img src="/images/modules/more-or-less.png" alt="More or Less" /></p>
<h3>Get 15%<span class="jm">discount</span></h3>
<span class="jm">For all dresses, till March 20th</span>
<p><a class="readmore2" href="#">Check it!</a></p>
</div>
</div>
