JSFiddle - React, Tailwind, and code Playground

by Andreas Loukakis

HTML

<div class="article">
    <div class="articleimagewrap">
        <a href="path/to/article">
        <img src="http://blog.lib.umn.edu/wlas0006/1001/insomnia1.jpg" class="articlelistimage">
            </a>
    </div>
    <div class="articlecontentwrap">
        <h3>Αι σάφερ φρομ ινσόμνια :/</h3>
        <p>Ένα πρόβατο, δύο πρόβατα, τρία πρόβατα...</p>
        <a href="path/to/article" class="readon">δες το όλο</a>
    </div>
</div>
    
    <div class="article">
    <div class="articleimagewrap">
        <img src="http://blog.lib.umn.edu/wlas0006/1001/insomnia1.jpg" class="articlelistimage">
    </div>
    <div class="articlecontentwrap">
        <h3>Αι σάφερ φρομ ινσόμνια :/</h3>
        <p>Ένα πρόβατο, δύο πρόβατα, τρία πρόβατα...</p>
        <a href="path/to/article" class="readon">δες το όλο</a>
    </div>
</div>
        
        <div class="article">
    <div class="articleimagewrap">
        <img src="http://blog.lib.umn.edu/wlas0006/1001/insomnia1.jpg" class="articlelistimage">
    </div>
    <div class="articlecontentwrap">
        <h3>Αι σάφερ φρομ ινσόμνια :/</h3>
        <p>Ένα πρόβατο, δύο πρόβατα, τρία πρόβατα...</p>
        <a href="path/to/article" class="readon">δες το όλο</a>
    </div>
</div>
            
            <div class="article">
    <div class="articleimagewrap">
        <img src="http://blog.lib.umn.edu/wlas0006/1001/insomnia1.jpg" class="articlelistimage">
    </div>
    <div class="articlecontentwrap">
        <h3>Αι σάφερ φρομ ινσόμνια :/</h3>
        <p>Ένα πρόβατο, δύο πρόβατα, τρία πρόβατα...</p>
        <a href="path/to/article" class="readon">δες το όλο</a>
    </div>
</div>

CSS

.article {position:relative;overflow:hidden;width:300px;height:200px;margin:5px;display:inline-block;}
.articleimagewrap, .articlecontentwrap {position:absolute;}
.articleimagewrap {z-index:20;transition: all 0.3s ease 0s}
.articleimagewrap img {width:100% !important;}
.articlecontentwrap {z-index:10}

.article:hover .articleimagewrap {opacity:0;visibility:hidden}