JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tile britney">
    <p> <span>Britney Spears</span>
        <br />Oops.. i did it again...
    </p>
</div>

<div class="tile aguliera">
    <p> <span>Christina Aguliera</span>
        <br />My sexy black hair...
    </p>
</div>

<div class="tile rasputina">
    <p> <span>Maria Rasputna</span>
        <br />Fucking awsome!
    </p>
</div>

CSS

* {
    font-family:'Calibri', serif;
}

.tile {

}
.tile p {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(255, 255, 255, .5);
    margin: 0px;
    padding: 10px 5px;
    color: #000;
    line-height: 90%;
    opacity: 0;
    transition: all 0.5s 0s;
}
.tile p span {
    font-weight: 700;
    font-size: 1.2em;
}
.tile:hover {
    background-size: 120%;
}
.tile:hover > p {
    opacity: 1;
}

.britney { background-image: url('http://podrobnosti.ua/upload/news/2010/01/20/659431_3.jpg'); }
.aguliera { background-image: url('http://firewolf91.free.fr/phpfirewolf/albums/Femme%20Sexy/2009/Christina%20Aguilera/normal_aguilera1781600x1200.jpg'); }
.rasputina { background-image: url('http://www.privilegea.ru/img/_big_foto/112_max.jpg'); width: 600px; }

JavaScript

/* где же яваскрипт?? */