Home

Welcome to the joomspirit_99 wiki!

Hover effect

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

Image with text horizontally

You can display an image on a side (left or right) 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

Image with text vertically

You can create a block with an image on the top and the text of your choice below. Simply, insert these lines into your HTML editor :

<div class="image-text-below color-slateblue">
  <span class="image-text-image-below" style="background-image:url('images/transports/E-Fan.jpg');" >E-Fan</span>
  <div class="image-text-column-below">
    <div>
      <h2>Airbus E-Fan</h2>
      <p>Des piles à combustible remplacent les batteries pour alimenter les turbines électriques de l'avion électrique d'Airbus : E-Fan.</p>
    </div>
  </div>
</div>