The Officer Admin
Aantal berichten : 54 Registratiedatum : 14-03-15
| Onderwerp: Sheet w/ image hover ma apr 27, 2015 9:36 am | |
| | lyrics here lyrics here lyrics here nickname age in letters member group alias play-by lyrics here lyrics here lyrics here |
first middle last this is where we can put our applications in all of their glory! they'll be really pretty and ahhh, so excited! - Code:
-
<style type="text/css"> #btlhov { width: 400px; height: 300px; position: relative; overflow: hidden; top: 10px; left: 6px;} #btlhov .nana { -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; position: absolute; bottom: -400px; opacity: 1 } #btlhov:hover .nana { -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; bottom: 43px; } .btlapp { width: 400px; height: 40px; background-color: #01333c; font-family: cambria; font-size: 12px; font-style: italic; text-align: center; line-height: 40px; color: #fff; text-transform: lowercase; letter-spacing: 3px; } .btlinfo { width: 150px; height: 200px; margin-bottom: 10px; border: 5px solid #fbfbfb; } .btlmore { width: 215px; height: 20px; background-color: #fbfbfb; color: #01333c; font-family: cambria; font-size: 8px; font-weight: bold; text-transform: uppercase; font-style: italic; line-height: 20px; text-align: center; letter-spacing: 1px; border: 1px solid #eee; margin-bottom: 5px; } </style> <center> <div style="width: 420px; padding: 20px; background-image: url(http://i44.tinypic.com/2v9yp35.png);"><div style="width: 400px; padding: 10px; background-color: #fff; border: 1px dotted #f1f1f1;"><div style="width: 400px; height: 300px; background-image: url(http://placehold.it/400x300);"> <div id="btlhov"><div class="nana"><table><td><div class="btlinfo"><img src="http://placehold.it/150x200" width="150"></div></td><td><div style="width: 215px; height: 15px; background-color: #fff; opacity: 0.6; line-height: 15px; font-family: calibri; text-transform: uppercase; letter-spacing: 2px; font-size: 8px; line-height: 15px; color: #01333c; text-align: center; margin-bottom: 5px; border-top: 1px dotted #01333c;">lyrics here lyrics here lyrics here</div><div class="btlmore">nickname</div><div class="btlmore">age in letters</div><div class="btlmore">member group</div><div class="btlmore">alias</div><div class="btlmore">play-by</div><div style="width: 215px; height: 15px; background-color: #fff; opacity: 0.6; line-height: 15px; font-family: calibri; text-transform: uppercase; letter-spacing: 2px; font-size: 8px; line-height: 15px; color: #01333c; text-align: center; border-bottom: 1px dotted #01333c;">lyrics here lyrics here lyrics here</div></td></table></div></div> <div class="btlapp">first middle last</div></div> <div style="width: 350px; height: 300px; padding: 25px; background-color: #fff;"><div style="width: 345px; height: 300px; padding-right: 5px; overflow: auto; font-family: cambria; font-size: 10px; line-height: 130%; color: #555; text-align: justify;"> this is where we can put our applications in all of their glory! they'll be really pretty and ahhh, so excited! </div></div> </div></div> </center> | |
|