Minimal Image Hover Effect Using Figcaption - jQuery Cardify

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.