JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spacer"></div>
<div class="ap_collections_container">
<div class="ap_collections_thumbs_container">
<div class="ap_collections_title_text">
<span>Title text</span>
</div>
<img src="assets/templates/kanemi.info/images/galleries-page-thumb.jpg" height="165px" width="165px" title="blank" alt="thumbnails here"></img>
<img src="assets/templates/kanemi.info/images/galleries-page-thumb.jpg" height="165px" width="165px" title="blank" alt="thumbnails here"></img>
</div>
<div class="ap_collections_info">Year: 1999-2004</div> 
<div class="ap_collections_info">artworks: 25 pieces</div>
<div class="clear_all"> </div> <!-- clear_all END -->
</div> <!--  ap_collections_container  END -->

<div class="spacer"></div>
<div class="ap_collections_container">
<div class="ap_collections_thumbs_container">
<div class="ap_collections_title_text">
<span>Title text</span>
</div>
<img src="assets/templates/kanemi.info/images/galleries-page-thumb.jpg" height="165px" width="165px" title="blank" alt="thumbnails here"></img>
<img src="assets/templates/kanemi.info/images/galleries-page-thumb.jpg" height="165px" width="165px" title="blank" alt="thumbnails here"></img>
</div>
<div class="ap_collections_info">Year: 1999-2004</div> 
<div class="ap_collections_info">artworks: 25 pieces</div>
<div class="clear_all"> </div> <!-- clear_all END -->
</div> <!--  ap_collections_container  END -->

CSS

/*----------   Galleries page individual collecetions styling ----------*/
.clear_all {
clear:both;
}

.spacer {

width: 400px;
margin-bottom:  10px ;
margin-top: 5px;
border-top: solid 3px #577273;


}

.ap_collections_container {
	
	background: none repeat scroll 0 0 #BF987E;
    margin-bottom: 10px;
    min-height: 200px;
    width: 400px;

}

.ap_collections_thumbs_container img {

	border: 5px solid #577273;
    margin: 10px 0 0 9px;
    text-align: center;
	opacity: 0.4;
    background: white;    
}

.ap_collections_title_text {
     
    display: inline;
    height: 175px;
    margin: 10px 0 0;
    position: absolute;
    width: 400px;
    z-index: 10;

}

.ap_collections_title_text  span {
   
	color: #944340;
    display: table-cell;
    font-size: 80px;
	font-weight: bold;
	text-shadow: 1px 1px 5px black, 2px 2px 1px #577273;
    height: 175px;
	text-align: center;
    vertical-align: middle;
    width: 940px;

}

.ap_collections_info {

	color: #944340;
    float: left;
    font-size: 30px;
    font-weight: bold;
    height: 50px;
	margin:10px 25px 0 10px;
    width: auto;


}

JavaScript

$(function(){
    

    $('.ap_collections_container').hover(function(){
        $(this).find('.ap_collections_thumbs_container img').fadeTo('slow',1);
        $(this).find('.ap_collections_title_text').fadeOut();
    },function(){
        $(this).find('.ap_collections_thumbs_container img').fadeTo('slow',0.4);
        $(this).find('.ap_collections_title_text').fadeIn();
    });    



    // The above is easier to read, but the below is more efficient
/*


    $('.ap_collections_container').hover(function(){
        $(this).find('.ap_collections_thumbs_container img').fadeIn().end()
               .find('.ap_collections_title_text').fadeOut();
    },function(){
        $(this).find('.ap_collections_thumbs_container img').fadeTo(0.4).end()
               .find('.ap_collections_title_text').fadeIn();
    });
    */

});