Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- console.log('DOM READY');
- $('#me').mouseover(function () {
- $('.hidden').fadeIn(1000);
- });
- $('#me').mouseout(function () {
- $('.hidden').fadeOut(1000);
- });
- });
- </script>
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>DominikBiedebach - Web- und Printdesigner</title>
- <style type="text/css">
- @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,700);
- html, body { background: #f4f4f4; color: #202020; }
- div#me{
- background: url(images/me.png) no-repeat;
- height: 256px;
- width: 256px;
- margin: 40px auto 10px auto;
- position: relative;
- }
- div#container{
- width: 960px;
- margin: 0px auto;
- text-align: center;
- }
- h1 {
- font-size: 100px;
- font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
- margin: 0px;
- }
- h3 {
- font-family: 'Open Sans', Arial, Helvetica, sans-serif;
- font-size: 30px;
- line-height: 26px;
- text-transform: uppercase;
- }
- .hidden { display: none; }
- #music {
- position: absolute;
- left: -200px;
- width: 200px;
- height: 400px;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="me">
- <div class="hidden" id="music">Testbox</div>
- <div class="hidden" id="webdesign">Testbox</div>
- </div>
- <h1>xxxx</h1>
- <h3>xxxx</h3>
- </div>
- </body>
- </html>
- $('#me').hover(function() {
- $('.hidden', this).fadeToggle(1000);
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement