Effects for your images

You can display easily your images with a nicely hover effect. See the examples below.

Important for the Hover3d effect : This effect use javascript and the script isn't loaded by default to prevent any problem and load your website faster. if you want use it, you must enable the Hover3d effect in Template manager (section "General").

Important : Be careful with the content inside each images. I recommend you to resize your browser until 980 pixels to look the result. The effect 3, 5 and 6 are more compliant. Under 980 pixels, the text is displayed under each images.

Thank to Unplash for these beautiful images

Effect 3D Hover

Title

Example of text


<div class="hover3d">

<div class="hover3d-card">
<div class="hover3d-image"><img src="/template-joomla/template-135/images/YOUR-IMAGE.jpg" alt="" /></div>
<div class="hover3d-detail"><div>
<h3 class="hover3d-title">Title<h3>
<div class="hover3d-text">Example with a link<div>
</div>
</div>
</div>
</a>
</div>

Effect 01

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

View more


<figure class="effect-image-1">

  <img src="/template-joomla/template-135/images/YOUR-IMAGE.jpg" alt="" /> 
  <figcaption> 
     <h3>Example of <span>Title</span></h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
     <a href="#">View more</a>
  </figcaption>

</figure>

Effect 02

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

View more


<figure class="effect-image-2">

  <img src="/template-joomla/template-135/images/YOUR-IMAGE.jpg" alt="" /> 
  <figcaption> 
     <h3>Example of <span>Title</span></h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
     <a href="#">View more</a>
  </figcaption>

</figure>

Effect 03

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

View more


<figure class="effect-image-3">

  <img src="/template-joomla/template-135/images/YOUR-IMAGE.jpg" alt="" /> 
  <figcaption> 
     <h3>Example of <span>Title</span></h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
     <a href="#">View more</a>
  </figcaption>

</figure>

Effect 04

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

View more


<figure class="effect-image-4">

  <img src="/template-joomla/template-135/images/YOUR-IMAGE.jpg" alt="" /> 
  <figcaption> 
     <h3>Example of <span>Title</span></h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
     <a href="#">View more</a>
  </figcaption>

</figure>

Effect 05

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

View more


<figure class="effect-image-5">

  <img src="/template-joomla/template-135/images/YOUR-IMAGE.jpg" alt="" /> 
  <figcaption> 
     <h3>Example of <span>Title</span></h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
     <a href="#">View more</a>
  </figcaption>

</figure>

Effect 06

Example of Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

View more


<figure class="effect-image-6">

  <img src="/template-joomla/template-135/images/YOUR-IMAGE.jpg" alt="" /> 
  <figcaption> 
     <h3>Example of <span>Title</span></h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
     <a href="#">View more</a>
  </figcaption>

</figure>