JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<article id="post-539" class="post-539 products type-products status-publish hentry media-post post-with-link" style="height: 310px;">
    <a href="http://palettenpool.bbdev.eu/produkte/collars/">
        <img class="media-post__img" src="http://palettenpool.bbdev.eu/content/uploads/2013/10/service-6-432x310.jpg" alt="Collars">
        <div class="media-post__overlay--effect" style="opacity: 0;">
            <div class="effect__contents">
                <div class="effect__contents--inner">
                    <h3>Collars</h3>
                    <span>Short description</span>
                </div>
            </div>
        </div>
    </a>
</article>
<article id="post-540" class="post-540 products type-products status-publish hentry media-post post-with-link" style="height: 310px;">
    <a href="http://palettenpool.bbdev.eu/produkte/one-way-pallets/">
        <img class="media-post__img" src="http://palettenpool.bbdev.eu/content/uploads/2013/10/service-2-432x310.jpg" alt="One-way Pallets">
        <div class="media-post__overlay--effect" style="opacity: 0;">
            <div class="effect__contents">
                <div class="effect__contents--inner">
                    <h3>One-way pallets</h3>
                    <span>Short description</span>
                </div>
            </div>
        </div>
    </a>
</article>
<article id="post-541" class="post-541 products type-products status-publish hentry media-post post-with-link" style="height: 310px;">
    <a href="http://palettenpool.bbdev.eu/produkte/cp1-cpg-pallets/">
        <img class="media-post__img" src="http://palettenpool.bbdev.eu/content/uploads/2013/10/service-3-432x310.jpg" alt="CP1 / CPG – Pallets">
        <div class="media-post__overlay--effect" style="opacity: 0;">
            <div class="effect__contents">
                <div class="effect__contents--inner">
                    <h3>CP1 / CPG - Pallets</h3>
                    <span>Short description</span>
                </div>
         ...

CSS

.media-post {
  max-height: 310px;
  max-height: 15.5rem;
  display: block;
  float: left;
  margin-right: 2.90698%;
  width: 31.39535%;
  margin-bottom: 2.90698%;
  overflow: hidden;
  background-color: #ececea;
  position: relative;
}

.media-post:last-child {
  margin-right: 0;
}
.media-post.post-with-link {
  cursor: pointer;
}

.media-post__overlay--effect {
  position: absolute;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.effect__contents--inner,
.media-post__overlay--inner {
  padding: 0 30px;
  padding: 0 1.5rem;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.media-post__overlay--effect {
  background-color: rgba(223, 149, 44, 0.7);
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2df952c, endColorstr=#f2df952c)";
}

.media-post__overlay--effect .effect__contents {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}

.media-post__overlay--effect .effect__contents h3,
.media-post__overlay--effect .effect__contents span {
  display: block;
  color: #fff;
}

JavaScript

function equalHeight(group) {
    var tallest = 0;
    $(group).each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    $(group).height(tallest);
}

equalHeight('.media-post');

$('.media-post').hover(
    function() {
        $(this).find('.media-post__overlay--effect')
               .stop()
               .animate(
                   {
                       opacity: 0.95
                   }, 300
               );
    },
    function() {
        $(this).find('.media-post__overlay--effect')
               .stop()
               .animate(
                   {
                       opacity: 0
                   }, 300
               );
    }
);