JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

<article class="category-images">
    <img src="http://toby.is/art/thumb-h200/hot-dawn.jpg">
    <div class="image-title-wrapper"><p class="image-title">Here we go mistaking clouds for mountains very appropriate for the image</p></span>
</article>

CSS

article.category-images {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 0;
  overflow: hidden;
}
div.image-title-wrapper {
  line-height: 1em;
  width: 100%;
  background-color: #111;
}
p.image-title {
  padding: 7px;
  margin: 0;
  color: white;
}

JavaScript

jQuery(document).ready(function($) {
    $('article.category-images').each(function(i) {
        var img = $('img', this);
        var cap = $('div', this);
        cap.css("width",img.width()+"px");
        var capHeight = cap.css('height');

        $(this).height(img.height());
        
        $(this).hover(function() {
            img.animate({marginTop : "-"+capHeight}, 500);
        }, function() {
            img.animate({marginTop : 0}, 500);
        });
    });
});