• HTML
• CSS

HTML

<div class="cont">
	<div class="cont-img">
		<label>Standard</label>
		<img src="hotel_1.png">
	</div>
	<div class="cont-img">
		<label>Family</label>
		<img src="hotel_2.png">
	</div>
	<div class="cont-img">
		<label>Superior</label>
		<img src="hotel_3.png">
	</div>
</div>

CSS

.cont{
	width:300px;
	margin:auto;
	overflow:hidden;
}
label{
	font-family:Arial;
	position:absolute;
	padding:4px;
	margin-left:-70px;
	transition:0.3s;
	background:rgba(0,0,0,0.6);
	color:#fff;
	opacity:0;
	z-index:2;
}
img{
	width:100%;
	height:150px;
	display:block;
	cursor:pointer;
	transition: 1.5s ease;
	-moz-transition: 1.5s ease; /*Firefox*/
	-webkit-transition: 1.5s ease; /*Chrome-Safari*/
	-o-transition: 1.5s ease; /*Oper*/
}
.cont-img:hover label{
	margin:0px;
	opacity:1;
}
img:hover{
	transform : scale(1.4);
	-moz-transform : scale(1.4); /*Firefox*/
	-webkit-transform : scale(1.4); /*Chrome-Safari */
	-o-transform : scale(1.4); /*Opera*/
	-ms-transform : scale(1.4); /*IE9*/
}