JSFiddle - React, Tailwind, and code Playground

HTML

<a href="a.html">
    <div id="galleryThumbnail">
        <img src="http://www.fagerhultgroup.com/press/images/camera-charles-cc-chan.jpg"></img>
        <div id="galleryTitle">
            <div class="title">Fotoaparat</div>
        </div>
    </div>
    <div id="galleryThumbnail">
        <img src="http://imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png"></img>
        <div id="galleryTitle">
            <div class="title">Knjižnica</div>
        </div>
    </div>
</a>

CSS

#galleryTitle{
	position:absolute;
    bottom: 0;
    left: 0;
    background-color:rgba(48,161,226,0.40);
    transition: background-color 1s;
    -webkit-transition: background-color 1s; /* Safari */
	color: white;
	font-size:22px;
	font-family:Segoe UI;
    width: 100%;
}

#galleryTitle:hover{
	background-color:rgba(48,161,226,1.0);
    transition: background-color 1s;
    -webkit-transition: background-color 1s; /* Safari */
}

#galleryThumbnail {
    height:200px;
    width:300px;
    position: absolute;
    opacity: 1;
    transition: opacity 1.5s linear 1s;
    -webkit-transition: opacity 1.5s linear 1s; /* Safari */    
}

#galleryThumbnail:hover {
    opacity: 0;
    transition: opacity 1.5s linear 1s;
    -webkit-transition: opacity 1.5s linear 1s; /* Safari */    
}

.title {
    padding: 8px 4px 8px 4px;
}