Uncategorised

Animated hover CSS3 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-first"><a href="#"><img src="/Old/image.jpg" /><a> <div class="mask"> <h2><a href="#">Title goes here</a> </h2> <p>Custom description goes here.</p> <a class="btn" href="#">Read More</a></div> </div> </div>

Title goes here

Custom description goes here

Example 2

<div class="dj-image-hover"> <div class="view view-second"><a href="#"><img src="/Old/image.jpg" /><a> <div class="mask"> <h2><a href="#">Title goes here</a> </h2> <p>Custom description goes here.</p> <a class="btn" href="#">Read More</a></div> </div> </div>

Title goes here

Custom description goes here.

Example 3

<div class="dj-image-hover"> <div class="view view-third"><a href="#"><img src="/Old/image.jpg" /><a> <div class="mask"> <h2><a href="#">Title goes here</a> </h2> <p>Custom description goes here.</p> <a class="btn" href="#">Read More</a></div> </div> </div>

Title goes here

Custom description goes here.

Fancy Module Content

Example 1

<div class="jm-rotate-wrap-left"><h3 class="jm-rotate1-left">Title 1</h3> <h2 class="jm-rotate2-left">Title 2</h2> <div style="clear: both;"> </div> <p>Custom description goes here.</p> <p><a href="#" class="btn btn-large btn-left btn-color">GO</a></p></div>

Title 1

Title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

Example 2

<div class="jm-rotate-wrap-right"><h3 class="jm-rotate1-right">Title 1</h3> <h2 class="jm-rotate2-right">Title 2</h2> <div style="clear: both;"> </div> <p>Custom description goes here.</p> <p><a href="#" class="btn btn-large btn-right">GO</a></p></div>

Title 1

Title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

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)

This is Heading Three (h3)

This is Heading Four (h4)

This is Heading Five (h5)

This is Heading Six (h6)

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.

Social icons with CSS3 effect

Color text

This is a text with the class "jm-text-color"
Enter the class name to span tag <span class="jm-text-color" />

This is a color text.

AICI GASESTI

IMAGINI

TOT AICI GASESTI

INFORMATII

ultimele noastre activitati

serbare

serbare

desene

desene

fotbal

fotbal

Uncategorised

Typography

Animated hover CSS3 effects for images

Title goes here

Title goes here

Title goes here

Fancy Module Content

Title 1

Title 2

Title 1

Title 2

Image Borders

Headings

This is Heading One (h1)

This is Heading Two (h2)

This is Heading Three (h3)

This is Heading Four (h4)

This is Heading Five (h5)

This is Heading Six (h6)

Numered blocks

Social icons with CSS3 effect

Color text

Read More Button

Prezentare - Scurt istoric

Orar

Fotografii

Noutati