I am trying to build a parallax scrolling website, but I have run into some trouble. All of my content divs are stacking on top of each other, and I can't figure out what to do to make them stop.
HTML
<body>
<div id="container">
<div id="depth0" class="parallax">
<div id="home" class="parallax">A Greener Home scroll down</div>
<div id="depth1" class="parallax">
<div id="nav">
home
go green
your area
how to
benefits
</div>
<div id="depth2" class="parallax">
<div id="gogreen"><img src="assets/images/go green bg.png" width="1280" height="909"><img src="assets/images/go green bg2.png" width="1280" height="94"></div>
<div id="depth3" class="parallax">
<div id="yourarea" class="parallax">
<img src="assets/images/in your area bg.png" width="1280" height="576">
<p><iframe src="http://batchgeo.com/map/2a9f0604b3bad18c47d7d2ab3dee7577" frameborder="0" width="80%" height="550" style="border:1px solid #aaa;border-radius:10px;"></iframe></p><p><small>View
In Your Area in a full screen map</small></p>
</div>
<div id="depth4" class="parallax">
<div id="howto" class="parallax">
<img src="assets/images/how to bg.png" width="1280" height="960">
<img src="assets/images/how to bg2.png" width="1280" height="520">
</div>
<div id="depth5" class="parallax">
<div id="benefits" class="parallax">
<img src="assets/images/benefits bg.png" width="1280" height="491">
<img src="assets/images/benefits bg2.png" width="1280" height="71">
</div>
</div>
</body>
CSS
#font-face {
font-family: 'capone_lightregular';
src: url('caponelight-webfont.eot');
src: url('caponelight-webfont.eot?#iefix') format('embedded-opentype'),
url('caponelight-webfont.woff') format('woff'),
url('caponelight-webfont.ttf') format('truetype'),
url('caponelight-webfont.svg#capone_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
margin: 0px;
padding: 0px;
height: 7000px;
background-color: #FDFDFD;
}
.parallax {
position: fixed;
height: 100%;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
#nav {
position: fixed;
text-align:center;
width: 100%;
}
#nav a {
text-decoration: none;
text-align: center;
padding-right: 4%;
width: 100%;
font-size: 55px;
font-family: "Capone Light";
color: #093;
font-style: normal;
text-transform: none;
}
#home {
height: 500px;
background-color: #FDFDFD;
}
#howto img {
width: 100%;
}
#depth5 #benefits img {
width: 100%;
}
#yourarea img {
width: 100%;
}
#gogreen img {
width: 100%;
}
#depth2 #yourarea p iframe {
margin-right: 10%;
margin-left: 10%;
}
#gogreen {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #090;
}
#yourarea {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #30C;
}
#howto {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #CF3;
}
#benefits {
height: 500px;
border: 5px solid #90F;
}
body {
margin: 0;
padding: 0;
height: 7000;
}
jQuery
$(document).ready(function(){
//running scrollCheck()
scrollCheck();
$(window).scroll(function(){
scrollCheck();
});
function scrollCheck(){
//initialize variables
var pos = $(window).scrollTop(), //position of the scroll bar in pixels
q = .5; //speed modifier
//parallax
$("#depth0").stop().animate({
top: (-pos*1*q)+"px"
});
$("#depth1").stop().animate({
top: (-pos*2*q)+"px"
});
$("#depth2").stop().animate({
top: (-pos*3*q)+"px"
});
$("#depth3").stop().animate({
top: (-pos*4*q)+"px"
});
//nav bar
$("#nav").stop().animate({
top: Math.max(Math.min(1000,1000-pos),0)+"px"
});
}
});
Here's the jsfiddle: http://jsfiddle.net/yKT9W/
Here I am just trying to answer by looking at the code you have given (I have not tried it on my system). Looking at the CSS given above, i don't see Z-index mentioned any where.
Most of the times such overlapping issue will be fixed by z-index.
I would suggest you to try the same once.
Ref: Link
Related
So, hard to explain, but I'm trying to position a link over the entire abstract background, but not include the overflow of the other image placed on top. I've tried about everything I could think of, and couldn't come up with a solution. Wrap all the images in the tag, and I couldn't figure out how to size it to only include the abstract background image border. Only wrap the abstract background and text, can't get it to include the overlaid image (within the border of the abstract background of course).
Am I trying to accomplish the impossible?
img {
max-width: 100%;
}
.cat-item-container {
display: flex;
flex-wrap: wrap;
padding-top: 50px;
}
.category-heading {
width: 100%;
text-align: center;
}
.cat-item {
width: 44%;
margin: 5% 3%;
position: relative;
}
.cat-background-img {
position: relative;
border-radius: 20px;
}
.cat-background-orange {
filter: hue-rotate(74deg);
}
.cat-item-img {
position: absolute;
z-index: 999;
bottom: 50%;
width: 70%;
}
.cat-title-container {
position: absolute;
z-index: 9999;
bottom: 20%;
left: 5%;
}
.cat-title {
color: white;
font-weight: 600;
font-size: 4vw;
text-shadow: 0px 0px 7px #3e3e3e;
margin: 0;
}
.cat-item a {
display: block;
}
#media screen and (min-width: 1200px) {
.cat-title {
font-size: 48px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="shop-by-category container">
<div class="category-heading">
Shop by Category
</div>
<div class="cat-item-container">
<div class="cat-item">
<a href="/category/water-slides/">
<img class="cat-item-img water-slide" src="//files.sysers.com/cp/upload/vzcpr/editor/full/blue-marble-water-slide.png">
<img class="cat-background-img cat-background-orange" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-orange.jpg">
<div class="cat-title-container">
<p class="cat-title">Water Slides</p>
</div>
</a>
</div>
<div class="cat-item">
<img class="cat-item-img combo-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/Tiki-bounce-combo.png">
<a href="/category/bounce-and-slide-combos/">
<img class="cat-background-img" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-pink.jpg">
<div class="cat-title-container">
<p class="cat-title">Combo Houses</p>
</div>
</a>
</div>
<div class="cat-item">
<img class="cat-item-img bounce-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/castle-no-background.png">
<img class="cat-background-img " src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-blue.jpg">
<div class="cat-title-container">
<p class="cat-title">Bounce Houses</p>
</div>
</div>
</div>
</div>
https://jsfiddle.net/61Lh3cyx/
To stop the 'top' of the imgs being part of the linking you could move the anchor element so it is not the parent of either img or the associated text. Move it to just below the text element and make it position absolute, the same height and width as the item and background color transparent.
That way the sticking out bit of the image does not get included, but the whole of the rest of the item is covered so you don't get a gap where the img is.
img {
max-width: 100%;
}
.cat-item-container {
display: flex;
flex-wrap: wrap;
padding-top: 50px;
}
.category-heading {
width: 100%;
text-align: center;
}
.cat-item {
width: 44%;
margin: 5% 3%;
position: relative;
}
.cat-background-img {
position: relative;
border-radius: 20px;
}
.cat-background-orange {
filter: hue-rotate(74deg);
}
.cat-item a {
position: absolute;
background-color: transparent;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.cat-item-img {
position: absolute;
z-index: 999;
bottom: 50%;
width: 70%;
}
.cat-title-container {
position: absolute;
z-index: 9999;
bottom: 20%;
left: 5%;
}
.cat-title {
color: white;
font-weight: 600;
font-size: 4vw;
text-shadow: 0px 0px 7px #3e3e3e;
margin: 0;
}
.cat-item a {
display: block;
}
#media screen and (min-width: 1200px) {
.cat-title {
font-size: 48px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="shop-by-category container">
<div class="category-heading">
Shop by Category
</div>
<div class="cat-item-container">
<div class="cat-item">
<img class="cat-item-img water-slide" src="//files.sysers.com/cp/upload/vzcpr/editor/full/blue-marble-water-slide.png">
<img class="cat-background-img cat-background-orange" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-orange.jpg">
<div class="cat-title-container">
<p class="cat-title">Water Slides</p>
</div>
</div>
<div class="cat-item">
<img class="cat-item-img combo-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/Tiki-bounce-combo.png">
<img class="cat-background-img" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-pink.jpg">
<div class="cat-title-container">
<p class="cat-title">Combo Houses</p>
</div>
<a href="/category/bounce-and-slide-combos/">
</a>
</div>
<div class="cat-item">
<img class="cat-item-img bounce-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/castle-no-background.png">
<img class="cat-background-img " src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-blue.jpg">
<div class="cat-title-container">
<p class="cat-title">Bounce Houses</p>
</div>
</div>
</div>
</div>
I have noticed that GIF's are not really compatible in all browsers so instead I have been using movies. Which has been working find until now. I have a website with a background image that is written in css. I had a feeling this would not work but I tried linking the movie like I would a image and it did not even show up. Below is the html and css.
html
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
css
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
From my understanding, linking the video is not going to happen so what would be another option? How would I go about this? I need to text that is there now to still show up and for the movie to be opaque. If I need to make the actual movie itself opaque I can do that. Thanks
Can view website all together here
You could add a video behind the "need a network" part, by using this code:
I replaced the video, and used the JavaScript code to "autoplay" the video!
If you think the video can autoplay without JavaScript, remove it!
I also replaced the iframe tag, with the video tag.
You can replace the video, by changing the src="" attribute on the <source> tag, inside the <video> tag.
function playVideo() {
document.getElementsByClassName('video')[0].play();
}
.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<body onload="playVideo()">
<section id="slider">
<video class="video" autoplay="autoplay">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
</body>
You can check out how to add a video Tutorial
Edit: Edited fiddle
var $vid = $('video','#container');
var $msg = $('#custom-message');
$msg.css({
top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});
video {
position: relative;
z-index: -1;
}
#custom-message {
position: absolute;
color: rgb(230, 200, 200);
z-index: 1;
}
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div id="container" align="center">
<video width="640" height="320" autoplay>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
<div id="custom-message">
Need a Network?</div>
<div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
</div>
</div>
</div>
</div>
</div>
</section>
How do you place text above an image, such that it runs across the bottom of the image.
i.e.
<div class="i_have_an_image">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
I am struggling to work it out, to see what I mean, The following web site, has a great example of this. I've seen it before on sites, heres an example snapshot of what I mean:
Wrap the image in an inline-block div which has position:relative.
Position the h2 absolutely with bottom:0 and width:100% and the height of the h2 will adjust automatically to the content of the positioned element.
.i_have_an_image {
display: inline-block;
position: relative;
}
.i_have_an_image img {
display: block;
}
.i_have_an_image h2 {
position: absolute;
margin: 0;
bottom: 0;
left: 0;
width:100%;
padding: 1em;
background: rgba(255, 255, 255, 0.5);
color: white;
}
<div class="i_have_an_image">
<img src="http://www.fillmurray.com/460/300" alt="">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.i_have_an_image{
position:relative;
width:200px;
height:200px;
}
h2{
position:absolute;
bottom:0px;
background:rgba(0,0,0,0.5);
color:#fff;
margin:0px;
}
<div class="i_have_an_image">
<img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.butFrame {
width: 32%;
position: relative;
cursor: pointer;
}
.butFrame .butHeading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 0;
display: block;
background: rgba(0, 0, 0, 0.5);
margin: 0;
font-family: inherit;
font-size: 1.2em;
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
<div class="butFrame">
<img src="https://unsplash.it/g/380/210?random">
<div class="butHeading">Heading</div>
https://jsfiddle.net/n0aLts9w/
Another solution of image with heading and sub heading. (As per your given image)
Demo Here
.i_have_an_image{
position: relative;
background-image: url(http://i.imgur.com/McIDx6g.jpg);
background: url((http://i.imgur.com/McIDx6g.jpg) no-repeat center center;
height: 400px;
width: 400px;
}
.title_wrap{
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
right: 0;
padding: 15px;
color: #ffffff;
}
.title_wrap h2 {
font-size: 20px;
margin: 0;
}
.title_wrap h6 {
font-size: 12px;
margin: 0;
}
<div class="i_have_an_image">
<div class="title_wrap">
<h2>Heading goes here</h2>
<h6>I appear on top of the image, but aligned along the bottom</h6>
</div>
</div>
You can make it like this:
I added only the "wrap" div
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color: #fff;
}
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
This is how I've been doing it recently. It's using the new html5 tag figcaption
It doesn't matter how big the image is or what you put in the figcaption it should just work.
figure.overlay {
display: inline-block;
position: relative;
margin: 0;
}
figure.overlay figcaption {
position: absolute;
background: rgba(0, 0, 0, .5);
color: #fff;
bottom: 4px;
width: calc(100%-10px);
padding: 5px;
}
<figure class="overlay">
<img src="http://www.dogbreedinfo.com/images/germanshepherdface.jpg">
<figcaption>
<h3>
'Some header of some sort!'
</h3> Words that make up a sentance! Or maybe 2 sentances.
<br />
<br />Even with a new line
</figcaption>
</figure>
Ho you can do it with flexbox simply like this:
.imageWrapper {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg");
background-size: 100%;
}
.textAboveImage {
width: 100%;
height: 50px;
background-color: grey;
z-index: 200;
opacity: 0.5;
}
<div class="imageWrapper">
<div class="textAboveImage">I'm text</div>
</div>
Cheers.
You can make it like this:
I added only the "wrap" div
HTML:
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
CSS:
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color:#fff;
}
I have a small bug that I can't seem to locate. In my snippet you can see how whenever you hover over the image, opactiy and an image scale takes place, as well as a box comes over the image. That is perfect, but my issue is whenever you hover over the text below it, the hover effect takes place over the image.
I can't seem to figure out how for the hover effect to only take place when the mouse is hovering over the image.
Any suggestions would be appreciated.
$('.home-img-block img').addClass(function() {
return (this.width / this.height > 1) ? 'wide' : 'tall';
});
#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 750px;
}
.home-img-block {
width: 33.33%;
float: left;
display: block;
overflow: hidden;
position: relative;
}
.home-img-container {
position: relative;
overflow: hidden;
cursor: pointer;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-container:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-container:hover:after {
opacity: 1;
}
.home-img-block img {
display: block;
transition: all 1s ease;
}
.home-img-block:hover img {
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
overflow: hidden;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
#home-img-block-wording-container {
width: 100%;
height: 300px;
}
.home-img-wording-blocks {
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.home-img-wording-block-title {
padding-top: 30px;
font-size: 1.7em;
}
.home-img-wording-block-description {
padding: 25px 50px 0 50px;
font-size: 1.1em;
color: #5d5d5d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="home-img-blocks">
<div class="home-img-block fadeBlock1">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought
to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
</div>
<div class="home-img-block fadeBlock2">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.
gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
</div>
</div>
<div class="home-img-block fadeBlock3">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test3new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g
gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
</div>
</div>
</div>
</div>
.home-img-block:hover .overlay
and
.home-img-block:hover img
replace them with
.home-img-container:hover .overlay
.home-img-container:hover img
otherwise you're triggering when you hover over the whole container instead of only wheen hovering the img one.
My website, http://dev.markzanghi.com, is rendering incorrectly in firefox and i don't know why.
Every other browser, including IE renders it correctly. The link above will display the mistake. Basically, i need two parts to my header for an animation. Below is my CSS
/*
TOP BAR
*/
.topbar {
height: 75px;
background: url('../img/headerBGtop.png') repeat-x;
}
.bottomTopBar {
background: url('../img/headerBGbottom.png') repeat-x;
height: 6px;
position: relative;
top: 64px;
}
.topbar .headerWrapper {
max-width: 924px;
margin: 0 auto;
padding: 0 5px;
}
.bottomHeader {
position: relative;
top: -11px;
left: 0px;
z-index: 1;
}
.headerArrowImg {
width: 924px;
overflow: hidden;
}
.bottomFiller {
position: relative;
top: -24px;
background: url(/img/headerBGbottom);
height: 11px;
}
#leftBottomHeader {
}
#rightBottomHeader {
top: -35px;
}
.logo {
float: left;
margin-top: 13px;
}
.logo img {
height: 55px;
}
.topbarLinks {
float: right;
text-decoration: none;
position: relative;
top: 44px;
z-index: 10;
}
.topbarLinks a{
color: white;
margin-left:25px;
padding: 10px 0px;
}
.topbar .headerArrowImg img {
max-width: none;
position: relative;
left: -200px;
}
And the HTML:
<header>
<div class="topbar navbar-fixed-top" >
<div class="headerWrapper">
<div class="logo">
<img src="img/homeLogo.png" />
</div>
<div class="topbarLinks">
<a id="workLink" href="#"><img src="img/workLink.png" /></a>
<a id="aboutLink" href="#/about"><img src="img/aboutLink.png" /></a>
<a id="contactLink" href="#/contact"><img src="img/contactLink.png" /></a>
</div>
<div id="bottomHeaderWrap" class="bottomHeader">
<div class="headerArrowImg">
<div id="arrowImgWrapper">
<img src="/img/headerArrowImg.png" />
</div>
</div>
</div>
</div>
<div id="leftBottomHeader" class="bottomFiller">
</div>
<div id="rightBottomHeader" class="bottomFiller">
</div>
</div>
</header>
If anyone has any idea why this is not working, please let me know!
Thanks in advance.
I had the same issue with a menu animation a while back.
The "problem" is that Firefox requires an explicit declaration of both X & Y coordinates when one is declared. On several items you have declared a top (Y), but you have not declared a left or right (X).
Add a left:0 or something and you should be fine. Or, since they are position:relative, you could just convert top to margin-top.