JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 <div class="parent">
  <div class="first">
	<img src="http://cs408216.vk.me/v408216149/3908/9VRZHJexdoI.jpg">
		<div class="name-one"><p>Вольт</p></div>
		<div class="year">2012</div>
		<div class="name-two"><p>Вольт/Wolt</div>		
	</div>
	<div class="first">
	<img src="http://cs408216.vk.me/v408216149/390f/YZc7LABJ7PA.jpg">
		<div class="name-one"><p>Король Лев</p></div>
		<div class="year"></div>
		<div class="name-two"></div>		
	</div>
		<div class="first">
	<img src="http://cs408216.vk.me/v408216149/3916/Y44-eShDzwQ.jpg">
		<div class="name-one"><p>Шрек Навсегда</p></div>
		<div class="year"></div>
		<div class="name-two"></div>		
	</div>
		<div class="first">
	<img src="http://cs408216.vk.me/v408216149/391d/EWi1GgOOkLA.jpg">
		<div class="name-one"><p>Кот в сапогах</p></div>
		<div class="year"></div>
		<div class="name-two"></div>		
	</div>

CSS

body {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size:12px;
}

.parent {
background:rgba(227,227,227, 0.4);
border:2px solid #ccc;
padding:5px 3px 5px 3px;
display:table;

}
.first {display:inline-block;
margin:4px;
position:relative;
width:150px;
height:220px;
}
.first:hover .year {
display: block;
}
.first:hover .name-one {
display: none;
}
.first:hover .name-two {
bottom: -10px;
z-index: 1;
}

.name-one {
position:absolute;
display:table;
bottom:0px;
width:150px;
height:50px;
background:rgba(20,65,113, 0.85);
color:#FFF;
margin-bottom:0px;
text-align:center;

}

.year {
position:absolute;
top:0;
right:0;
background:rgba(20,65,113, 0.85);
padding:5px;
color:#FFF;
display: none;
}

.name-two {
position:absolute;
display:table;
bottom:0px;
z-index: -1;
width:150px;
height:60px;
background:rgba(20,65,113, 0.85);
color:#FFF;
margin-bottom:0px;
text-align:center;
}