JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<article class="large">
        <div class="widget red">
            <p>
                <span>Date</span> <em>Location</em>
            </p>
            <img src="http://dummyimage.com/400/000/fff.gif" alt="img" width="400" height="400" />
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero leo, viverra nec mollis quis, volutpat vel erat. Phasellus consectetur ipsum sit amet quam dapibus vel auctor eros condimentum. Integer vulputate molestie pharetra. Aliquam viverra auctor tortor nec rutrum. Mauris blandit fermentum fringilla.</p>            
            
        </div><!--//widget-->
        <p class="more">
          <a href="#">READ MORE</a>
        </p>
    </article><!--//large-->

<br /><br />

<article class="medium">
        <div class="widget red">
            <p>
                <span>Date</span> <em>Location</em>
            </p>
            <img src="http://dummyimage.com/200/000/dedede.gif" alt="img" width="200" height="200" />
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero leo, viverra nec mollis quis, volutpat vel erat. Phasellus consectetur ipsum sit amet quam dapibus vel auctor eros condimentum. Integer vulputate molestie pharetra. Aliquam viverra auctor tortor nec rutrum. Mauris blandit fermentum fringilla.</p>            
            
        </div><!--//widget-->
           <p class="more">
             <a href="#">READ MORE</a>
           </p>
    </article><!--//medium-->

CSS

.large{
            width: 400px;
            background: #dedede;
            position: relative;
        }

.medium{
    width: 200px;
    background: #dedede;
    position: relative;
}
        
        .widget{
            border-top: 3px solid #f00;
        }
        
        .more{
            display: none;
            position: absolute;
            top: 0;
            width: 100%;
            text-align: center;
            z-index: 2;
        }

        .more a{
           background: #fff;
           display: block;
           width: 100px;
           height: 100px;
           margin: 0 auto;
           -moz-border-radius: 100px;
           -webkit-border-radius: 100px;
        }

JavaScript

$(document).ready(function(){
            $('.large, .medium').hover(function(){
                $(this).children('.widget').fadeTo(200, .25).end().children('.more').show();
                //$('.more').show();
            },
            function(){
                $(this).children('.widget').fadeTo(200, 1.0).end().children('.more').hide();
                //$('.more').hide();
            })
                .each( function( index, item) {
                 //item = this
                 var hover = $(this).find('.more');
                 var top = Math.round( ( $(this).find('.widget img').outerHeight() - hover.outerHeight() ) / 2);
                 hover.css('top', top + 'px');                
            });
        });