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>

If you install and enable the hover3d plug-in, you can easily insert a hover3d image when you click the "hover3d image" button in the editor.

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

If you install and enable the imagetext plug-in, you can easily insert an image with text when you click the "image with text" button in the editor.

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-lightslategrey">
  <img class="image-text-image" src="images/YOUR-IMAGE.jpg"  alt="" />
  <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>