Minimal Image Hover Effect Using Figcaption - jQuery Cardify
File Size: | 19.3 KB |
---|---|
Views Total: | 1682 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Cardify is a dead simple jQuery plugin to create a basic image hover effect that wraps the image in a <figure>
element and adds the extracted alt text into a <figcaption>
element.
How to use it:
1. Add the CSS class 'imgCardify' to your images and then wrap them into a container element with the CSS class of 'mgwrap'. You're able to customize the image caption displayed in the <figcaption>
by using the alt
attribute.
<div class="imgwrap"> <img class="imgCardify" src="1.jpg" alt="Image Caption 1"> <img class="imgCardify" src="2.jpg" alt="Image Caption 2"> <img class="imgCardify" src="3.jpg" alt="Image Caption 3"> ... </div>
2. Add jQuery library and the Cardify plugin's script to the page.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="index.js"></script>
3. Apply your own styles to the image captions that will appear on hover.
.alt-text { text-align: center; display: block; position: relative; margin: 20px; color: #fff; } figcaption { position: absolute; opacity: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 22px; background-color: rgba(0,0,0,0.8); } .alt-text:hover > figcaption.alt { opacity: 1; }
This awesome jQuery plugin is developed by adgalaz. For more Advanced Usages, please check the demo page or visit the official website.