Su pedido está vacío

 

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="dj-image-hover">
<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>

 

Title

Lorem ipsum.

Read More

Example 2

<div class="dj-image-hover">
<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>

 

Title

Lorem ipsum.

Read More

 

Example 3

<div class="dj-image-hover">
<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>

 

Title

Lorem ipsum.

Read More

Example 4

<div class="dj-image-hover">
<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>

 

Title

Lorem ipsum.

Read More

 

Example 5

<div class="jm-animated-image">
<img class="border_img2" src="/images/modules/bottom2/girl1.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="#">PINK PANTHER</a></h3>
<span class="jm-description">OFFER VALID UNTIL MARCH 20TH</span>
<span class="jm-price">$32</span>
<a class="jm-checkit" href="#">CHECK IT OUT!</a>
</div>
</div>
</div>
</div>
</div>
Promotion
 
 

PINK PANTHER

OFFER VALID UNTIL MARCH 20TH $32 CHECK IT OUT!

 

Image Borders

<img class="border_img1" src="/image.jpg" />
Typography
<img class="border_img2" src="/image.jpg" />
<img class="border_img3" src="/image.jpg" />
Typography

 

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

<p class="jm-block"><span class="jm">01</span>Text goes here</p>

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.

<p class="jm-block second"><span class="jm">a</span>Text goes here</p>

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
This is a list with the class "jm-dark"
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
This is a list with the class "jm-light"
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
  1. Duis tincidunt nunc sit amet ipsum
  2. Duis tincidunt nunc sit amet ipsum
  3. Duis tincidunt nunc sit amet ipsum
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
      3. Duis tincidunt nunc sit amet ipsum
This is a list with the class "jm-roman"
Enter the class name to ol tag <ol class="jm-roman">
  1. Duis tincidunt nunc sit amet ipsum
  2. Duis tincidunt nunc sit amet ipsum
  3. Duis tincidunt nunc sit amet ipsum
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
      3. Duis tincidunt nunc sit amet ipsum
This is a list with the class "jm-alpha"
Enter the class name to ol tag <ol class="jm-alpha">
  1. Duis tincidunt nunc sit amet ipsum
  2. Duis tincidunt nunc sit amet ipsum
  3. Duis tincidunt nunc sit amet ipsum
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
      1. Duis tincidunt nunc sit amet ipsum
      2. Duis tincidunt nunc sit amet ipsum
      3. Duis tincidunt nunc sit amet ipsum

 

Custom lists

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-account">
This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-cart">
  • Duis tincidunt nunc sit amet ipsum
This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-club">
  • Duis tincidunt nunc sit amet ipsum

 

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-delivery">
  • Duis tincidunt nunc sit amet ipsum
This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-mastercard">
  • Duis tincidunt nunc sit amet ipsum
This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-secure">
  • Duis tincidunt nunc sit amet ipsum

 

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-sizing">
  • Duis tincidunt nunc sit amet ipsum
This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-visa">
  • Duis tincidunt nunc sit amet ipsum

 

Social icons

<p class="jm-icons">
<a class="jm-facebook" href="#"> &nbsp; </a>
<a class="jm-twitter" href="#"> &nbsp; </a>
<a class="jm-rss" href="#"> &nbsp; </a>
<a class="jm-google" href="#"> &nbsp; </a>
</p>

 

   

 

Read More Button

This is a read more link with the class "readmore"
Enter the class name to a tag <a class="readmore" />

Read more

 

Read More Alternate Button

This is a read more link with the class "readmore2"
Enter the class name to a tag <a class="readmore2" />

Read more

 

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-row jm-box3">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.

 

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-custom-service">
<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.

Read More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.

Read More

Size Chart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.

Read More

Terms of Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.

Read More

 

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-categories jm-box3 jm-rounded">
<div class="jm-custom-box">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/women.png" alt="women" /> <span class="category-name">Women</span> </a></h2>
</div>
</div>
<div class="jm-custom-box">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/men.png" alt="men" /> <span class="category-name">Men</span> </a></h2>
</div>
</div>
<div class="jm-custom-box">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/kids.png" alt="kids" /> <span class="category-name">Kids</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.

 

<p><a href="#"><img src="/images/modules/top/dress1.jpg" alt="Cotton Dress" /></a></p>
<div class="jm-custom-slide">
<h3><a href="#">Cotton Dress</a></h3>
<span class="jm-slide-price">$75</span>
<span class="jm-slide-desc">offer valid until March 20th</span>
<p><a class="readmore" href="#">Readmore</a></p>
</div>

Cotton Dress

Cotton Dress

$75 offer valid until March 20th

Readmore

 

Custom Discount

<div class="jm-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>
Model

More or Less

Get 15%discount

For all dresses, till March 20th

Check it!