<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.example{
position:relative;
padding:0;
width:300px;
display:block;
cursor:pointer;
overflow:hidden;
}
.content {
opacity:0;
font-size: 40px;
position:absolute;
top:0;
left:0;
color:#1c87c9;
background-color:rgba(200,200,200,0.5);
width:300px;
height:300px;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align:center;
}
.example .content:hover { opacity:1; }
.example .content .text {
height:0;
opacity:1;
transition-delay: 0s;
transition-duration: 0.4s;