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="blanck"></img>
<img src="assets/templates/kanemi.info/images/galleries-page-thumb.jpg" height="165px" width="165px" title="blank" alt="blanck"></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="blanck"></img>
<img src="assets/templates/kanemi.info/images/galleries-page-thumb.jpg" height="165px" width="165px" title="blank" alt="blanck"></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;

}

.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

//create a new function
var PhotosFadeUp = function() {
	//here you create your selector
	//then you add .fade
	//finally declare a value between 0 and 1 (0 being invisible, 1 being full visibility)
	this.getElements('.ap_collections_thumbs_container img').fade('1');
};


//create a new function
var PhotosFadeOrig = function() {
	//here you create your selector
	//then you add .fade
	//finally declare a value between 0 and 1 (0 being invisible, 1 being full visibility)
	this.getElements('.ap_collections_thumbs_container img').fade('0.4');
};

//create a new function
var apTitleTextOrig = function() {
	//here you create your selector
	//then you add .fade
	//finally declare a value between 0 and 1 (0 being invisible, 1 being full visibility)
	this.getElement('.ap_collections_title_text').fade('1.0');
};

//create a new function
var apTitleTextHide = function() {
	//here you create your selector
	//then you add .fade
	//finally declare a value between 0 and 1 (0 being invisible, 1 being full visibility)
	this.getElement('.ap_collections_title_text').fade('0');
};

window.addEvent('domready', function() {
	$$('.ap_collections_container').addEvent('mouseover', PhotosFadeUp);
	$$('.ap_collections_container').addEvent('mouseleave', PhotosFadeOrig);
	$$('.ap_collections_container').addEvent('mouseover', apTitleTextHide);
	$$('.ap_collections_container').addEvent('mouseleave', apTitleTextOrig);

});