Код:
<!--HTML--> <center> <div id="trc"> <div class="trcimg"></div> <div class="trc1">парк</div> <div class="trc3"> Небольшой парк, прилегающий к фермерскому отсеку. Здесь раскинулись светлые аллейки, прогулочные дорожки и уютные зоны отдыха. Является не только приятным дополнением к нелегкой жизни на станции, но и кислородным центром: под потолком отсека находится мощная система вентиляций, которая снабжает всю станцию должным количеством кислорода. Посещение парка остается свободным для всех желающих в любое время суток. </div> </center> <style> #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: System; width: 600px; font-size: 40px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; line-height: 30px; color: #665b54; text-shadow: 1px 1px 1px #bdb4ae, 1px 1px 25px rgba(166, 126, 89, 0.68); -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: 90px; width: 550px; top: 95px; border-style: solid; border-color: #3b2415; border-width: 3px 0px; padding: 10px 30px; background-color: #948981; position: absolute; opacity: 0; overflow: auto; text-align: center; -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; } #trc { height: 400px; width: 600px; position: relative; overflow: hidden; } .trcimg { height: 300px; width: 600px; position: absolute; background-image: url("http://s1.uploads.ru/ZloFT.jpg"); }</style></pre></div></div></div>