How we can swap page’s Background Image on Navigation Hover
Style
Display on Screen. look like.
| <!DOCTYPE html> <html> <head> <title>...</title> </head> <link href="default.css" rel="stylesheet" type="text/css"/> <body> <header> </header> <div class="container"> <nav> <h1>Design By Naulej</h1> <ul> <li class="active"> <a href="#">Home</a> <img src="images/rose.jpg" alt=""> </li> <li> <a href="#">About</a> <img src="images/android.jpg" alt=""> </li> <li> <a href="#">Clients</a> <img src="images/Blue_paint2.jpg" alt=""> </li> <li> <a href="#">Work</a> <img src="images/work.jpg" alt=""> </li> <li> <a href="#">Contact</a> <img src="images/crosshatch_woven_mat-background-colored-50-opacity-1024x768.jpg" alt=""> </li> </ul> </nav> <img src="images/bydefault.jpg" alt=""> </div> </body> </html> |
Style
| @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } body { background:#666; } .container { position: relative; overflow: hidden; margin: 100px auto; width: 800px; height: 500px; -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3); box-shadow: 10px 10px 10px rgba(0,0,0,0.3); } .container img { position: absolute; top: 0; left: 0; z-index: -60; } .container li img { position: absolute; top: 0; left: 800px; z-index: -50; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } nav { width: 170px; height: 500px; background: #fff; } nav h1 { padding: 20px; color: #ccc; text-align: right; font: 25px Georgia, Times, serif; } ul { width: 800px; height: 500px; list-style: none; } li a { z-index: 1; display: block; padding-left: 20px; width: 150px; height: 30px; background: white; color: #444; text-decoration: none; font: 14px/30px Helvetica, Verdana, sans-serif; } li:nth-child(1) { padding-top: 50px; } li a:hover { background:#F00; } li a:hover + img { left: 0px; } |
Display on Screen. look like.
No comments:
Post a Comment