Title on hover

Hi,

I’m no expert on CSS, but here is the CSS code on the site above that brings this all together. Not sure if this helps in your implementation

.loop-hover__title{
	margin:25px
0 18px;
	text-align:center;
	text-transform:uppercase;
	font-family:'NovecentowideNormalRegular';
	font-size:20px;
	letter-spacing:2px;
	color:#191919
}

.loop-hover__block{
	position:relative;
	width:210px;
	text-align:center
}

.loop-hover__link{
	display:block;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	text-transform:uppercase;
	font-family:'NovecentowideNormalRegular';
	font-weight:400;
	line-height:140px;
	letter-spacing:2px;
	background-color:#fff;
	background-color:rgba(255,255,255,.8);
	visibility:hidden;
	opacity:0;
	-webkit-transition:opacity .3s ease-out, visibility 0s ease-out .3s;
	transition:opacity .3s ease-out, visibility 0s ease-out .3s
}

.loop-hover__link>*{
	display:inline-block;
	line-height:1.2;
	vertical-align:middle;
	*display:inline;
	*zoom:1
}

.loop-hover__link
.title{
	margin:0
10px;
	font-size:14px;
	color:#191919;
	max-height:46px;
	overflow:hidden
}

.loop-hover__link
.time{
	margin:5px
0 6px;
	font-size:10px;
	color:#777
}

.loop-hover__link
.more{
	height:21px;
	text-indent:-9999px;
	background:transparent url(/wp-content/themes/kayture/images/icons/icn-more_hover.png) center top no-repeat
}

and sample HTML

<li class="slider-item">
    <div class="loop-hover__block">
        <img src="http://www.kayture.com/wp-content/uploads/2014/02/080mango_looks-0038-210x140.jpg" alt="MANGO 080 LOOK" />
        <a class="loop-hover__link" href="http://www.kayture.com/2014/02/mango-080-look.html" rel="bookmark" title="MANGO 080 LOOK">
            <div>
                <div class="title">MANGO 080 LOOK</div>
                <div class="time">
                    <time pubdate datetime="2014-02-05T08:30:00+01:00">February 5, 2014</time>
                </div>
                <div class="more">More</div>
            </div>
        </a>
    </div>
</li>