I've a question about a style problem in parallax scrolling.
I copied code from codepen.io to create a framework for a site. There are 3 divs that use the "title" class and two of them respond when I use "title:hover" to style them further.
But the second div isn't responding to the CSS inside "title:hover".
I tried giving it a class of its own or an ID, neither worked. I tried adding ":before" like the other two divs on lines 115 and 125 but it completely messed up the whole div.
I think the underlying problem is my lack of experience and I'm not 100% on how the code is working so can't iron out the problem myself. Time and practice will fix these problems but for now any help is greatly appreciated!
Here's the code, html first then the stylesheet:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheetII.css">
</head>
<body>
<div id="title" class="slide header">
<h1>OQO</h1>
</div>
<div id="slide_I" class="slide">
<div class="title">
<h1>A Chique Retreat</h1>
<p>Your stylish coffeehouse to meet friends and relax, right in the heart of this vibrant city. Step out of the hussle and bussle and step into the suave Luxe Deco of the OQO cafe - your coffee nook.</p>
<h2>About Us >></h2>
</div>
</div>
<div id="slide_II" class="slide">
<div class="title">
<h1>Coffee and Treats</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
<h2 style="float: right;"> << Menu </h2>
</div>
<img src="images/test_VIII.jpg">
<img src="images/test_IX.jpg">
</div>
<div id="slide_III" class="slide">
<div class="title">
<h1>Venue</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
<h2>Events >></h2>
</div>
</div>
<div id="slide_IV" class="slide header">
<h1>Get in touch</h1>
</div>
</body>
</html>
/* stylesheet */
@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative);
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: 'Cinzel Decorative';
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.title:hover {
box-shadow: 0 0 18px rgba(0, 0, 0, 1.5);
}
.title h2:hover {
text-decoration: underline;
}
.slide:nth-child(2n) .title {
margin-right: auto;
margin-left: 0;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url(images/oqo_owners.jpg);
z-index:2;
}
#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
}
#slide_I:before {
background-image: url(images/test_V.jpg);
transform: translateZ(-1px) scale(2);
}
#slide_II {
background-image: url(images/test_VII.jpg);
z-index:2;
}
#slide_III:before {
background-image: url(images/test_X.jpg);
transform: translateZ(-1px) scale(2);
}
#slide_IV {
background: #222;
color: gold;
}
#slide_IV:hover {
text-shadow: 1px 1px 2px black, 0 0 25px lightgrey, 0 0 5px grey;
}
This behaviour occurs because the div with the classname slide_II has a higher z-index than the second .title div.
So, while hovering the .title div, you're actually hovering the slide_II div which is layered above.
Give a higher z-index and position relative to .title and the :hover functions would work normally.
@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative);
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: 'Cinzel Decorative';
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.title:hover {
box-shadow: 0 0 18px rgba(0, 0, 0, 1.5);
}
.title h2:hover {
text-decoration: underline;
}
.slide:nth-child(2n) .title {
margin-right: auto;
margin-left: 0;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
position: relative;
z-index: 3;
}
.slide,
.slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url(images/oqo_owners.jpg);
z-index: 2;
}
#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
}
#slide_I:before {
background-image: url(images/test_V.jpg);
transform: translateZ(-1px) scale(2);
}
#slide_II {
background-image: url(images/test_VII.jpg);
z-index: 2;
}
#slide_III:before {
background-image: url(images/test_X.jpg);
transform: translateZ(-1px) scale(2);
}
#slide_IV {
background: #222;
color: gold;
}
#slide_IV:hover {
text-shadow: 1px 1px 2px black, 0 0 25px lightgrey, 0 0 5px grey;
}<div id="title" class="slide header">
<h1>OQO</h1>
</div>
<div id="slide_I" class="slide">
<div class="title">
<h1>A Chique Retreat</h1>
<p>Your stylish coffeehouse to meet friends and relax, right in the heart of this vibrant city. Step out of the hussle and bussle and step into the suave Luxe Deco of the OQO cafe - your coffee nook.</p>
<h2>About Us >></h2>
</div>
</div>
<div id="slide_II" class="slide">
<div class="title">
<h1>Coffee and Treats</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
<h2 style="float: right;">
<< Menu </h2>
</div>
<img src="images/test_VIII.jpg">
<img src="images/test_IX.jpg">
</div>
<div id="slide_III" class="slide">
<div class="title">
<h1>Venue</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
<h2>Events >></h2>
</div>
</div>
<div id="slide_IV" class="slide header">
<h1>Get in touch</h1>
</div>