Home

Welcome to the joomspirit_99 wiki!

Add hover 3D effect to an image

Enable hover3d in the general configuration panel.

Populate the <img> tag like this :

<div class="hover3d">
  <a class="hover3d-link" href="your url link" >
  <div class="hover3d-card">
    <div class="hover3d-image"><img src="images/your-image.jpg" alt="" /></div>
      <div class="hover3d-detail">
        <div>
          <h3 class="hover3d-title">Your title</h3>
          <div class="hover3d-text">Your text</div>
        </div>
    </div>
  </div>
  </a>
</div>

You can mix other image effects with the hover 3D. 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

Add hover plate effect to a module position

Customize plate effect in the animations configuration panel. See online documentation, for options : https://github.com/krebszattila/jquery-plate#options

To disable the plate effect for a module position, simply set the options to zero. As example : perspective: 0, maxRotation: 0, animationDuration: 0

Image with text

You can display an image on a side and some text on the other side, with the background color of your choice. It's easy and there's 148 colors available. Simply, insert these lines into your HTML editor :

<div class="image-text-right color-lightslategrey">
  <a class="image-text-image" style="background-image:url('images/YOUR-IMAGE.jpg');"  href="URL OF THE LINK" >Description</a>
  <div class="image-text-column">
    <div>
      <h2>Your Title</h2>
      <p>Your text here</p>
      <p><a  href="URL OF THE LINK" >View more</a></p>
    </div>
  </div>
</div>

The result is responsive : http://www.template-joomspirit.com/template-joomla/template-123/index.php?option=com_content&view=article&id=41&Itemid=179