Код:
<!--HTML--> <style type="text/css"> .walden { width: 420px; height: 220px; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; } .henry {width: 420x; height: 220px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;-ms-transform-style: preserve-3d; } .walden:hover .henry {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-ms-transform: rotateY(180deg); } .emerson {overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute;} .waldo {overflow: hidden; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; width: 400px; height: 200px; padding: 10px; background-color: #716B7C; overflow: auto; float: left; } .walden:hover .waldo {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1; background-color: #716B7C;} </style> <link href='http://fonts.googleapis.com/css?family=Buda:300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'> <center> <div style="width: 420px; height: 35px; background-color: #3B2543; color: rgba(235,242,238, .85);font-family: buda; font-size: 22px; text-align:center; text-transform: uppercase;line-height: 160%;">лесной массив</div> <div class="walden"><div class="henry"><div class="emerson"><div style="width:400px; height: 200px; background-image: url(http://sg.uploads.ru/0MXw6.png); border: 10px solid #A4BDB1;"></div></div><div class="waldo"><div style="width: 150px; height: 200px; position: relative; float: left;"><img src="http://sh.uploads.ru/NE79b.png"></div><div style="height: 190px; width: 215px; border: 5px solid #96A0A3; background-color: #EBF2EE; position: relative; float: right;"><div style="width: 195px; height: 170px; padding: 10px; text-align: justify; color: #3B2543; font-family: cuprum; font-size: 11px; line-height: 94%;overflow: auto;">Леса не только приносят великую пользу человеку, украшают и оздоравливают землю, но и поддерживают самую жизнь на земле. В летнюю пору в лесу стоит настоящая благодать. Деревья одеты в ярко-зелёное убранство, мягкая трава стелется по земле. Воздух напоен запахом трав и разогретой солнцем древесины. А если очутиться в лесу ранним утром, можно наблюдать, как на траву выпадает свежая роса, как распускается множество лесных цветов.<br> Могучие, ветвистые деревья, склоняющие свои ветви к самой земле. Минимум солнечного света в самых чащах, который просто не способен просочиться сквозь листву. Шуршание лесной травы под ногами, прохлада и свежайший запах еловых шишек, от которого кружится голова. В каждую пору года лес прекрасен. Именно потому многие выбирают прогулку по лесным тропинкам. Именно в лесу так же находится чистейшее, горное озеро, расположившееся особо близко к местному конному лагерю, потому на лесных дорожках можно часто встретить любителей верховой езды и конного спорта вместе со своими четвероногими подопечными. </div></div></center>