I am trying to get a 100% div which is fixed (so that it stays at the top of the page when you scroll) to scroll over multiple small div's with a hover affect. I cannot seem to figure out how to get the navigation to hover over the small divs, it always goes behind it. I believe the problem is the css position tags, but i am at a loss... Please help!Here is the code for the small div with the hover affect.. i took out the top navigation div because it was not working for me...\[code\]<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link rel="stylesheet" href="http://stackoverflow.com/questions/14407841/styles.css" /></head><body><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div><div class="main"><div class="view view-fifth"> <img src="http://stackoverflow.com/questions/14407841/1.png" /><div class="mask"> <h2>Android 4.0</h2> <a href="http://stackoverflow.com/questions/14407841/#" class="info">$9.99</a> <p> Dual Core! 4GB Memory, 1024x768 Best Tablet of 2013! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! You Buy Now! </p></div></div></div></body></html>\[/code\]And the CSS\[code\] .view {width: 180px;height: 160px;margin: 5px;float: left;overflow: hidden;position: relative;text-align: center;/*-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;*/cursor: default;background: #fff url() no-repeat center center;/*border-top: 2px solid #2e84c0; border-left: 2px solid #2e84c0; border-right: 2px solid #efefef;border-bottom: 4px solid #2e84c0;*/border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;}body {background-image:url (../img/blue_line_background.jpg);min-width:1080px;}.view .mask,.view .content {width: 180px;height: 160px;position: absolute;overflow: hidden;top: 0;left: 0;}.view img {display: block;position: relative;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;}.view h2 { text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 15px;padding: 2px;background: rgba(0, 0, 0, 0.8);margin: 0 0 0 0;}.view p {font-family: Georgia, serif;font-style: italic;font-size: 12px;position: relative;color: #fff;/*padding: 10px 20px 20px;*/text-align: center;}.view a.info {display: inline-block;text-decoration:none;font-weight:bold;padding: 5px;background:;color: #359ce1;text-transform: uppercase; /* -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000;*/}.view a.info: hover {-webkit-box-shadow: 0 0 5px #000;-moz-box-shadow: 0 0 5px #000;box-shadow: 0 0 5px #000;}.view-fifth img {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;} .view-fifth .mask {background-color: #c3c3c3;-webkit-transform: translateX(-300px);-moz-transform: translateX(-300px);-o-transform: translateX(-300px);-ms-transform: translateX(-300px);transform: translateX(-300px);-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; border-bottom-left-radius: 5px;border-top-left-radius: 5px;} .view-fifth h2 {background: rgba(255, 255, 255, 0.5);color: #000;-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5); border-top-left-radius: 5px;border-top-right-radius: 5px;}.view-fifth p {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;color: #000;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;-ms-transition: all 0.2s linear;transition: all 0.2s linear; border-bottom-left-radius: 5px;border-top-left-radius: 5px;}.view-fifth:hover .mask {-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);transform: translateX(0px);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;}.view-fifth:hover img {-webkit-transform: translateX(300px);-moz-transform: translateX(300px);-o-transform: translateX(300px);-ms-transform: translateX(300px);transform: translateX(300px);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;}.view-fifth:hover p {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}\[/code\]And for some reason.. the code entry button never works for me.. i have to enter 4 spaces per line Manually to post code..
Div to Float over div with hover effect
- Thread starter crazyguy
- Start date