Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style type="text/css"> #likeanimals { width: 500px; height: 500px; position: relative; top: 0px; left: 0px; -moz-transition: all1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; overflow: hidden; padding: 15px; } .predator { position: absolute; top: 30px; left: -400px; width: 400px; height: 100px; color: white; font-family: 'Oswald', sans-serif; font-size: 40px; text-transform: upperrcase; text-align: center; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #likeanimals:hover .predator { top: 30px; left: 50px; width: 400px; } .prey { position: relative; top: 120px; left: -0px; width: 400px; height: 325px; opacity: 0; background: #fff; border-top: 3px solid #000; color: ##3d3d3d; font-family: calibri; font-size: 11px; line-height: 110%; overflow:auto; text-align: justify; text-transform: lowercase; -moz-transition: all1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #likeanimals:hover .prey { top: 120px; left: -15px; right: 70px; width: 400px; opacity: 1; } .ifyourun { margin: 40px 0px; } .notenough { margin: 20px; } </style> <center><div style="width: 500px; height: 500px; background: url(http://savepic.net/7046424.png); border-bottom: 10px solid #000;"> <div id="likeanimals"> <div class="predator"> <div class="ifyourun"> NAME </div></div><div class="prey"><div class="notenough"> <center><font size="2"><b>возраст ☆ профессия ☆ ориентация</b></font></center><br><br> <justify>место для того, чтобы описать вашего персонажа, указать желаемые черты характера и факты биографии.</justify> <br><br> <hr> <justify>под чертой укажите желаемые отношения и возможные требования к игроку.</justify> </div></div></div></div> </center> </center>
Код:
<!--H*TML--><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style type="text/css"> #likeanimals { width: 500px; height: 500px; position: relative; top: 0px; left: 0px; -moz-transition: all1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; overflow: hidden; padding: 15px; } .predator { position: absolute; top: 30px; left: -400px; width: 400px; height: 100px; color: white; font-family: 'Oswald', sans-serif; font-size: 40px; text-transform: upperrcase; text-align: center; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #likeanimals:hover .predator { top: 30px; left: 50px; width: 400px; } .prey { position: relative; top: 120px; left: -0px; width: 400px; height: 325px; opacity: 0; background: #fff; border-top: 3px solid #000; color: ##3d3d3d; font-family: calibri; font-size: 11px; line-height: 110%; overflow:auto; text-align: justify; text-transform: lowercase; -moz-transition: all1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #likeanimals:hover .prey { top: 120px; left: -15px; right: 70px; width: 400px; opacity: 1; } .ifyourun { margin: 40px 0px; } .notenough { margin: 20px; } </style> <center><div style="width: 500px; height: 500px; background: url(!!!ССЫЛКА НА КАРТИНКУ 500x500!!!); border-bottom: 10px solid #000;"> <div id="likeanimals"> <div class="predator"> <div class="ifyourun"> NAME </div></div><div class="prey"><div class="notenough"> <center><font size="2"><b>возраст ☆ профессия ☆ ориентация</b></font></center><br><br> <justify>место для того, чтобы описать вашего персонажа, указать желаемые черты характера и факты биографии.</justify> <br><br> <hr> <justify>под чертой укажите желаемые отношения и возможные требования к игроку.</justify> </div></div></div></div> </center> </center>
. . . вставьте шаблон в код и уберите звездочку . . .