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").

For all these examples, I add the class "one-half" and "one-half last" to obtain 2 columns (see the page Column layout here). This code is optionnal.

Important : Be careful with the content inside each images. The images will be smaller in phone so you must write only few words. And if you display 2 images per lines (like on this page), it's more critical. You must resize your browser to look the result. The effect 3, 5 and 6 are more compliant.

Thank to Unplash for these beautiful images

Effect 3D Hover

Title

Example with a link

Title

Example without link



<div class="hover3d one-half">
<a class="hover3d-link" href="URL OF THE LINK" >
<div class="hover3d-card">
<div class="hover3d-image"><img src="/template-joomla/template-124/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>


<div class="hover3d one-half last">
<div class="hover3d-card">
<div class="hover3d-image"><img src="/template-joomla/template-124/images/YOUR-IMAGE.jpg" alt="" /></div>
<div class="hover3d-detail"><div>
<h3 class="hover3d-title">Title<h3>
<div class="hover3d-text">Example without link<div>
</div>
</div>
</div>
</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 one-half">

  <img src="/template-joomla/template-124/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>

<figure class="effect-image-1 one-half last">

  <img src="/template-joomla/template-124/images/YOUR-SECOND-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



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

  <img src="/template-joomla/template-124/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>

<figure class="effect-image-2 one-half last">

  <img src="/template-joomla/template-124/images/YOUR-SECOND-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



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

  <img src="/template-joomla/template-124/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>

<figure class="effect-image-3 one-half last">

  <img src="/template-joomla/template-124/images/YOUR-SECOND-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



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

  <img src="/template-joomla/template-124/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>

<figure class="effect-image-4 one-half last">

  <img src="/template-joomla/template-124/images/YOUR-SECOND-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



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

  <img src="/template-joomla/template-124/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>

<figure class="effect-image-5 one-half last">

  <img src="/template-joomla/template-124/images/YOUR-SECOND-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



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

  <img src="/template-joomla/template-124/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>

<figure class="effect-image-6 one-half last">

  <img src="/template-joomla/template-124/images/YOUR-SECOND-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>