<!--HTML-->
<center>
<div id="trc">
  <div class="trcimg"></div>
  <div class="trc1">название локации</div>
  <div class="trc3">WORDS HERE. IT SCROLLS. YAY.
</div>
  </div>
</center>


<style>
#trc {
height: 298px;
width: 650px;
position: relative;
overflow: hidden;
}

.trcimg {
height: 298px;
width: 650px;
position: absolute;
background-image: url("http://s7.uploads.ru/lgpK1.jpg");
}

#trc .trcimg {
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
transition-duration: 1.5s;
}

#trc:hover .trcimg {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
transition-duration: 1.5s;
}

.trc1 {
    position: absolute;
    top: 125px;
    font-family: Palatino Linotype;
    width: 650px;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    line-height: 30px;
    color: #4E3323;
    text-shadow: 1px 1px 1px #E2B9A5;
    -webkit-transition: all 0.8s ease-in-out 0.3s;
    -moz-transition: all 0.8s ease-in-out 0.3s;
    -o-transition: all 0.8s ease-in-out 0.3s;
    transition: all 0.8s ease-in-out 0.3s;
}

#trc:hover .trc1 {
top: 25px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}


.trc3 {
    height: 150px;
    width: 590px;
    top: 75px;
    border-style: solid;
    border-color: #886957;
    border-width: 3px 0px;    padding: 10px 30px;
    background-color: #A67E59;
    position: absolute;
    opacity: 0;
    overflow: auto;
    text-align: justify;
    -webkit-transition: 0.8s ease;
    -moz-transition: 0.8s ease;
    -o-transition: 0.8s ease;
    transition: 0.8s ease;}

#trc:hover .trc3 {
opacity: 1;
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}</style>