Skip to content
Olivier edited this page Aug 25, 2018 · 9 revisions

Welcome to the joomspirit_99 wiki!

Add hover 3D effect to your image

Populate the img tag like this :

<div class="hover3d">
  <div class="hover3d-card">
    <div class="hover3d-image"><img src="images/example.jpg" alt="" /></div>
  </div>
</div>

You can combine other image effects with the 3D hover. As example :

<figure class="effect-image-1">
  <div class="hover3d">
    <div class="hover3d-card">
      <div class="hover3d-image"><img src="images/image.png" alt="" /></div>
      <figcaption>
        <h3>Example of <span>Title</span></h3>
        <p>Description example</p>
        <a href="#">View more</a>
      </figcaption>
    </div>
  </div>
</figure>

See online documentation, for other image effects : http://www.template-joomspirit.com/template-joomla/template-99/index.php?option=com_content&view=article&id=72&Itemid=238

Clone this wiki locally