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…
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="main">
<div class="view view-fifth">
<img src="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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="1.png" />
<div class="mask">
<h2>Android 4.0</h2>
<a href="#" 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>
And the CSS
.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;
}
And for some reason.. the code entry button never works for me.. i have to enter 4 spaces per line Manually to post code..
I’ve done similar things in the past. I wanted to have a navigation tab on the side of the page and have it always displayed over top of whatever else was on the page when it was expanded. This was easily accomplished by using a mixture of position: fixed along with z-index: 1000 while also anchoring this div to the body itself.
W3C has a good article on the subject of position and z-index:
http://www.w3schools.com/cssref/pr_class_position.asp
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I hope this helps.