This question already has answers here:
How to overlay one div over another div
(9 answers)
Closed 2 years ago.
I've made a cool html page (with CSS, of course) that creates like a space animated background. Now, I know this might sound like a stupid question, but how do I put text on top of it?
The html is as follows:
<div class="background-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
<div>
<h1>HEADER 1</h1>
</div>
</div>
Can I do it if I take HEADER 1 out of the div?
<h1>HEADER 1</H1> is what I'm trying to get to be shown on top of the other things (stars, twinkling, clouds, etc) but I'm not really sure how to do it.
Can anyone please help? Thanks.
Here's the full code (open in a larger window):
<!DOCTYPE html>
<style>
#keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-moz-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
.background-container{
position: fixed;
top: 0;
left:0;
bottom: 0;
right: 0;
}
.stars {
background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
z-index: 0;
}
.twinkling{
width:10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
-moz-animation:move-background 70s linear infinite;
-ms-animation:move-background 70s linear infinite;
-o-animation:move-background 70s linear infinite;
-webkit-animation:move-background 70s linear infinite;
animation:move-background 70s linear infinite;
}
.clouds{
width:10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
-moz-animation:move-background 150s linear infinite;
-ms-animation:move-background 150s linear infinite;
-o-animation:move-background 150s linear infinite;
-webkit-animation:move-background 150s linear infinite;
animation:move-background 150s linear infinite;
}
img{
height: 70vh;
width:70vh;
position: absolute;
z-index: 3;
right: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="background-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
<div class="centered">
<h1>HEADER 1</h1>
</div>
</div>
</html>
I would use position absolute and apply a z-index to layer the h1 above the background. You can then offset the position relative to the container.
#keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-moz-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
#-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to {
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
.background-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.stars {
background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
z-index: 0;
}
.twinkling {
width: 10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
-moz-animation: move-background 70s linear infinite;
-ms-animation: move-background 70s linear infinite;
-o-animation: move-background 70s linear infinite;
-webkit-animation: move-background 70s linear infinite;
animation: move-background 70s linear infinite;
}
.clouds {
width: 10000px;
height: 100%;
background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
-moz-animation: move-background 150s linear infinite;
-ms-animation: move-background 150s linear infinite;
-o-animation: move-background 150s linear infinite;
-webkit-animation: move-background 150s linear infinite;
animation: move-background 150s linear infinite;
}
img {
height: 70vh;
width: 70vh;
position: absolute;
z-index: 3;
right: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
position: absolute;
top: 0;
left: 0;
color: #fff;
padding: 10px;
z-index: 10;
}
<div class="background-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
</div>
<div class="content">
<h1>HEADER 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ex leo, lobortis eget libero in, venenatis tincidunt ipsum. Nulla ultrices purus in ornare ultricies. In et faucibus justo. Nunc in tempus diam, nec facilisis eros. Quisque non quam id mi rutrum volutpat vel ac purus. Suspendisse potenti. Etiam non orci porttitor, lacinia magna eget, imperdiet ex. Pellentesque bibendum ligula vel elit tincidunt, quis aliquam nisl consequat. Pellentesque facilisis lectus ac orci commodo, ac cursus nibh mollis. Nunc turpis ipsum, laoreet sit amet odio sit amet, aliquam dignissim nisi. Suspendisse potenti.</p>
<p>Nullam at sodales urna, quis pellentesque lectus. Aenean a augue consequat, viverra libero ut, varius ex. Duis id ipsum sed risus aliquet consectetur. Aliquam facilisis nunc quis purus rutrum lobortis. Praesent mollis tincidunt quam at molestie. Nulla volutpat congue leo, at malesuada tortor ornare eget. Suspendisse porta ipsum vel enim lobortis, non aliquam tortor convallis. Aenean maximus, nibh ut sollicitudin porta, justo ipsum auctor mauris, vitae sagittis nisl lectus vel orci. In hac habitasse ictumst. Suspendisse ultricies lobortis accumsan. Nulla turpis justo, tristique sed magna et, pretium elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis quam a nisl efficitur posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ex leo, lobortis eget libero in, venenatis tincidunt ipsum. Nulla ultrices purus in ornare ultricies. In et faucibus justo. Nunc in tempus diam, nec facilisis eros. Quisque non quam id mi rutrum volutpat vel ac purus. Suspendisse potenti. Etiam non orci porttitor, lacinia magna eget, imperdiet ex. Pellentesque bibendum ligula vel elit tincidunt, quis aliquam nisl consequat. Pellentesque facilisis lectus ac orci commodo, ac cursus nibh mollis. Nunc turpis ipsum, laoreet sit amet odio sit amet, aliquam dignissim nisi. Suspendisse potenti.</p>
<p>Nullam at sodales urna, quis pellentesque lectus. Aenean a augue consequat, viverra libero ut, varius ex. Duis id ipsum sed risus aliquet consectetur. Aliquam facilisis nunc quis purus rutrum lobortis. Praesent mollis tincidunt quam at molestie. Nulla volutpat congue leo, at malesuada tortor ornare eget. Suspendisse porta ipsum vel enim lobortis, non aliquam tortor convallis. Aenean maximus, nibh ut sollicitudin porta, justo ipsum auctor mauris, vitae sagittis nisl lectus vel orci. In hac habitasse ictumst. Suspendisse ultricies lobortis accumsan. Nulla turpis justo, tristique sed magna et, pretium elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis quam a nisl efficitur posuere.</p>
</div>
Related
#div1 {
text-align: center;
font-family: serif;
animation: fadeIn 2s;
color: white;
font-style: italic;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html {
background-color: black;
}
#poza {
border: 3px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 500px;
height: 300px;
display: block;
margin-left: auto;
margin-right: 1%;
animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#text {
float: left;
color: white;
position: absolute;
}
<div id="div1">
<h1 id="titlu">Titlu</h1>
</div>
<br>
<img id="poza" src="exemplu.jpg" alt="exemplu">
<p id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
Those HTML and CSS Code shows an image to right, a centered title, and a text that I can't align. I tried something with float-left, but did not seem to work.
enter image description here
There is an image here to show you. Maybe it is because of the margins?
You will have to do changes in your #poza declaration.
#div1 {
text-align: center;
font-family: serif;
animation: fadeIn 2s;
color: white;
font-style: italic;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html {
background-color: black;
}
#poza {
border: 3px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 500px;
height: 300px;
display:block;
margin: auto;//added this
// margin-left: auto; commented this
//margin-right: 1%; commented this
animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#text {
float: left;
color: white;
position: absolute;
}
<div id="div1">
<h1 id="titlu">Titlu</h1>
</div>
<br>
<img id="poza" src="data:image/jpeg;base64,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" alt="exemplu">
<p id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
I'm making portfolio website. After position fixed half transparent gradient animation and image the margin of images element don't work. When creating element #images i wanted to be under the text 10vh. I expected the image to be under text element. But the sample image is on the top and move the gradient down. Why and how to put the #images under the text?
https://codepen.io/abooo/pen/erQWBQ?editors=1100
*{margin:0;padding:0;}
html {
height:100%;
width:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div#overlay{
position:fixed;
opacity:0.5;
background: linear-gradient(224deg, #a18cd1, #fbc2eb, #fbc2eb, #a6c1ee, #f6d365, #fda085, #84fab0, #8fd3f4, #a6c0fe, #f68084, #fccb90, #d57eeb, #e0c3fc, #8ec5fc, #f093fb, #f5576c, #4facfe, #00f2fe, #43e97b, #38f9d7, #30cfd0, #330867, #667eea, #764ba2, #fddb92, #d1fdff, #00c6fb, #005bea, #b721ff, #21d4fd, #d558c8, #24d292, #09203f, #537895);
background-size: 6800% 6800%;
height:100%;
width:100%;
-webkit-animation: GardientOverlay 200 ease infinite;
-moz-animation: GardientOverlay 200 ease infinite;
-o-animation: GardientOverlay 200s ease infinite;
animation: GardientOverlay 200s ease infinite;
}
#-webkit-keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
#-moz-keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
#-o-keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
#keyframes GardientOverlay {
0%{background-position:99% 0%}
50%{background-position:2% 100%}
100%{background-position:99% 0%}
}
div#text{
font-size:calc(6vh + 6vw);
}
div#containerText{
padding:1vw;
opacity:0.7;
position:absolute;
top:0;
height:100vh;
background-color:white;
z-index:10;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align:center;
display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center;
}
.text{
left:0;
width:100vw;
top:100vh;
position:absolute;
background-color:white;
padding:calc(1vh + 1vw);
box-sizing: border-box;
font-size:2vmax;
}
div#images{
height:100vh;
width:100vw;
}
div#images img{
width:inherit;
height:inherit;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='overlay'></div>
<div id='images'>
<img src='https://www.gstatic.com/webp/gallery/1.jpg' alt='gallery'/>
</div>
<div id='containerText'>
<div id='text'>Hi!</div>
</div>
<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mattis quam sit amet sollicitudin. Vivamus quis ullamcorper velit. Phasellus vitae quam id libero tempus tempor in in velit. Maecenas at arcu nec felis feugiat mollis. Quisque et velit eu enim ullamcorper vestibulum eu convallis justo. Donec scelerisque purus ipsum, ut consequat enim scelerisque vitae. Aliquam dignissim massa non dolor sollicitudin, eleifend aliquam urna commodo. Pellentesque ut tristique erat. Sed non nisl ac odio consectetur tincidunt. Integer turpis sem, viverra et vulputate ut, dignissim id diam. Nullam venenatis, ante rhoncus tincidunt pulvinar, ex velit blandit nisi, ut laoreet ex odio vitae metus. Morbi arcu elit, congue a nisl vitae, euismod facilisis sapien. Donec gravida, lorem eu volutpat tristique, lectus erat pharetra justo, a aliquam massa quam tincidunt purus. Phasellus eu fringilla sapien. Quisque imperdiet magna sed sapien rutrum, quis mattis libero convallis. Vivamus non luctus leo.
</div>
</body>
</html>
Try html and css above.
I have a div with an image.
On hover, I want to make the image bigger and to display some text next to the div.
I want to show the text once the first transition (make the image bigger) has ended.
I've tried a lot of things but did not manage to find any solution, here is my last try :
.width-12 {
width: 100%;
height: 100%;
}
.change-hover {
width: 10%;
transition: all 1s;
float: left;
}
.show-hover {
display: none;
text-align: left;
opacity: 0;
transition: opacity 0s;
}
.discover-no-hover:hover .change-hover {
width: 24%;
float: left;
}
.discover-no-hover:hover .show-hover {
display: block;
opacity: 1;
transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
<div class="box small bkg-white">
<div class="feature-column medium mb-50 center hover-align">
<div class="iconcool">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg"
alt="" class="img-responsive change-hover">
</div>
<div class="show-hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis. Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
</div>
</div>
</div>
</div>
JSfiddle for those who don't like the snippet
How can I make the text appear only after the image stopped growing ? (Or after 1s, wich is the duration of the image growing)?
Thank you !
You have
.show-hover {
display: none;
text-align: left;
opacity: 0;
transition: opacity 0s; /* this*/
}
Just amend this to
transition: 0s opacity 1s;
.width-12 {
width: 100%;
height: 100%;
}
.change-hover {
width: 10%;
transition: all 1s;
float: left;
}
.show-hover {
display: block;
text-align: left;
opacity: 0;
transition: 0s opacity 1s;
}
.discover-no-hover:hover .change-hover {
width: 24%;
float: left;
}
.discover-no-hover:hover .show-hover {
display: block;
opacity: 1;
transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
<div class="box small bkg-white">
<div class="feature-column medium mb-50 center hover-align">
<div class="iconcool">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg" alt="" class="img-responsive change-hover">
</div>
<div class="show-hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis.
Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
</div>
</div>
</div>
</div>
JSFiddle.
This is the HTML:
<div class='slide-show'>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/b865a018-7479-47d2-b80c-2ec8fd85c0c8_4.jpg' alt=''>
<div class='content'>
<div class='title'>Lorem ipsum</div>
<div class='description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam dolor, fermentum quis orci laoreet, efficitur sodales libero. Duis accumsan malesuada risus quis pretium.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/1a212f38-ae12-4052-b462-d452be7f7de9_4.jpg' alt=''>
<div class='content'>
<div class='title'>Vestibulum porta neque</div>
<div class='description'>Vestibulum porta neque dui, sed varius massa dignissim id. Vestibulum congue gravida urna ac egestas. Sed urna lectus, condimentum at nisi et, vestibulum porttitor enim. Morbi ex felis, malesuada quis eleifend sed, consequat in velit. Nunc lacinia nec erat ut efficitur.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/d47c2741-a8d8-4d78-888b-93b54e6d0be2_4.jpg' alt=''>
<div class='content'>
<div class='title'>Pellentesque habitant</div>
<div class='description'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nisi magna, vehicula nec velit vel, porttitor ullamcorper sem. Donec porttitor ipsum sit amet convallis ornare. Ut vitae eros ante. </div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/6393c5ce-2ac6-4480-9446-7cb3c5aaafff_4.jpg' alt=''>
<div class='content'>
<div class='title'>Phasellus ac aliquam lectus</div>
<div class='description'>Phasellus ac aliquam lectus, eget posuere odio. Morbi et mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/d85b86ab-92ad-4615-97e7-10836d36c350_4.jpg' alt=''>
<div class='content'>
<div class='title'>Aliquam eget lorem</div>
<div class='description'>Aliquam eget lorem ac justo tempor tempor at ut dolor. Vivamus pharetra cursus ex nec rutrum. Ut euismod justo urna, id feugiat dui lobortis sagittis. </div>
</div>
</div>
</div>
and this is the CSS:
.slide-show {
position: relative;
width: 480px;
height: 300px;
}
.single-slide {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide img {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide .title,
.single-slide .description {
box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: white;
background-color: rgba(255, 255, 255, 0.6);
color: black;
mix-blend-mode: luminosity;
font-family: serif;
font-size: 1.2em;
width: 100%;
padding: 0.5em 1em;
}
.single-slide .description {
height: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1em;
transition: 0.2s linear;
-webkit-transition: 0.2s linear;
overflow: hidden;
}
.slide-show .content {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.slide-show:hover .description {
height: auto;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.slide-show:hover .single-slide {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.slide-show .single-slide {
animation: slideshow 10s infinite running;
-webkit-animation: slideshow 10s infinite running;
}
.slide-show .single-slide:nth-child(1) {
animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.slide-show .single-slide:nth-child(2) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.slide-show .single-slide:nth-child(3) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.slide-show .single-slide:nth-child(4) {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.slide-show .single-slide:nth-child(5) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#keyframes slideshow {
5%, 20% {
opacity: 1;
}
0%,
25%,
100% {
opacity: 0;
}
}
#-webkit-keyframes slideshow {
5%, 20% {
opacity: 1;
}
0%,
25%,
100% {
opacity: 0;
}
}
The code works fine in Firefox(Version 42.0 on Ubuntu 14.04 LTS 64-bit), but it looks weird in Chrome (Version 47.0.2526.73 (64-bit)). The animation only does one loop (10s), then disappears. When I hover over it, it shows up again, then disappears again after 2s.
How can I fix my code?
This issue is related to the mix-blend-mode property. It seems like Chrome doesn't fully like it, and it fails (maybe a bug?) when it processes it (even when according to caniuse.com it is supported in Chrome).
If you remove it, the animation works fine both in Chrome and Firefox. You can see it on this demo (and on your JSFiddle):
/* no script fallback
** make the picture slide internally
** but the user can't control them
*/
.slide-show {
position: relative;
width: 480px;
height: 300px;
}
.single-slide {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide img {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide .title, .single-slide .description {
box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: white;
background-color: rgba(255, 255, 255, 0.6);
color: black;
font-family: serif;
font-size: 1.2em;
width: 100%;
padding: 0.5em 1em;
/*mix-blend-mode: luminosity;*/
}
.single-slide .description {
height: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1em;
transition: 0.2s linear;
-webkit-transition: 0.2s linear;
overflow: hidden;
}
.slide-show .content {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.slide-show:hover .description {
height: auto;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.slide-show:hover .single-slide {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.slide-show .single-slide {
animation: slideshow 10s infinite running;
-webkit-animation: slideshow 10s infinite running;
}
.slide-show .single-slide:nth-child(1) {
animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.slide-show .single-slide:nth-child(2) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.slide-show .single-slide:nth-child(3) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.slide-show .single-slide:nth-child(4) {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.slide-show .single-slide:nth-child(5) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#keyframes slideshow {
5%, 20% {
opacity:1;
}
0%, 25%, 100% {
opacity:0;
}
}
#-webkit-keyframes slideshow {
5%, 20% {
opacity:1;
}
0%, 25%, 100% {
opacity:0;
}
}
<div class='slide-show'>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/b865a018-7479-47d2-b80c-2ec8fd85c0c8_4.jpg' alt=''>
<div class='content'>
<div class='title'>Lorem ipsum</div>
<div class='description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam dolor, fermentum quis orci laoreet, efficitur sodales libero. Duis accumsan malesuada risus quis pretium.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/1a212f38-ae12-4052-b462-d452be7f7de9_4.jpg' alt=''>
<div class='content'>
<div class='title'>Vestibulum porta neque</div>
<div class='description'>Vestibulum porta neque dui, sed varius massa dignissim id. Vestibulum congue gravida urna ac egestas. Sed urna lectus, condimentum at nisi et, vestibulum porttitor enim. Morbi ex felis, malesuada quis eleifend sed, consequat in velit. Nunc lacinia nec erat ut efficitur.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/d47c2741-a8d8-4d78-888b-93b54e6d0be2_4.jpg' alt=''>
<div class='content'>
<div class='title'>Pellentesque habitant</div>
<div class='description'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nisi magna, vehicula nec velit vel, porttitor ullamcorper sem. Donec porttitor ipsum sit amet convallis ornare. Ut vitae eros ante. </div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/6393c5ce-2ac6-4480-9446-7cb3c5aaafff_4.jpg' alt=''>
<div class='content'>
<div class='title'>Phasellus ac aliquam lectus</div>
<div class='description'>Phasellus ac aliquam lectus, eget posuere odio. Morbi et mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/d85b86ab-92ad-4615-97e7-10836d36c350_4.jpg' alt=''>
<div class='content'>
<div class='title'>Aliquam eget lorem</div>
<div class='description'>Aliquam eget lorem ac justo tempor tempor at ut dolor. Vivamus pharetra cursus ex nec rutrum. Ut euismod justo urna, id feugiat dui lobortis sagittis. </div>
</div>
</div>
</div>
It's missing the others syntaxes like:
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
and
animation: slideshow 10s infinite running;
-webkit-animation: slideshow 10s infinite running;
-moz-animation: slideshow 10s infinite running;
-o-animation: slideshow 10s infinite running;
In my website, I have added fonts (in my CSS) and have tried to use them in my website, but they don't show up. I have used three fixes:
FIX 1:
body {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}
#-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
FIX 2:
$(‘body’)
.delay(500)
.queue(
function(next){
$(this).css(‘padding-right’, ‘1px’);
});
FIX 3:
jQuery.fn.redraw = function() {
return this.hide(0, function(){jQuery(this).show()});
};
jQuery(document).ready(function() {
jQuery('body').redraw();
});
They have all had no effect, and my website stays the same. It could be Chrome, my computer, or I might've incorrectly linked the sites, I don't know. Any help would be appreciated. Here is my code (I left out my JavaScript as it is irrelevant):
HTML
<main class="content" role="main">
<section class="section two">Ut dui diam, vulputate a gravida non, ullamcorper ac leo. Aenean pellentesque feugiat quam ac facilisis. Sed aliquam justo vel augue tincidunt facilisis. Phasellus lacinia quis sem sed aliquam. Etiam ultrices in arcu vel elementum. Maecenas scelerisque leo nec elit convallis, sagittis tincidunt purus consectetur. Cras gravida fringilla sem, in lacinia diam interdum sit amet. Nunc viverra nunc vitae diam malesuada, eu sollicitudin erat feugiat. Sed sed dapibus dui. Nullam a convallis erat, quis malesuada mi. Nunc vel malesuada elit. Proin a finibus turpis. Nullam faucibus magna sed felis fermentum iaculis. Nam et faucibus odio, vel viverra purus. Fusce pellentesque tincidunt ante, vitae tempor purus pulvinar eget. Fusce luctus orci sit amet nisi tincidunt, ut ullamcorper quam posuere. Vivamus elit massa, aliquam sed lectus non, condimentum accumsan turpis. Duis purus nibh, suscipit in lectus quis, dapibus rutrum turpis. Phasellus tristique nulla non ipsum lacinia, quis mattis quam laoreet. Vivamus sagittis, ante id sodales rutrum, odio eros commodo risus, quis consectetur lacus nunc vitae neque. Donec mauris urna, fringilla et laoreet fermentum, porttitor at nibh. Donec lorem magna, vulputate a ligula ut, tempor sollicitudin erat. Curabitur lobortis fringilla diam, a sodales nibh placerat ac. Aenean id feugiat dolor. Suspendisse potenti. Donec sed sem eu felis ullamcorper laoreet. Nunc blandit ut nibh nec condimentum. Phasellus a tincidunt ipsum. Quisque blandit congue lacus vitae venenatis. Suspendisse sit amet lobortis velit. Duis rhoncus vehicula elementum. Cras in viverra nunc. Maecenas egestas molestie mauris at placerat. Suspendisse congue faucibus est et aliquam. Nam rutrum sapien et iaculis eleifend. Donec eu tincidunt urna, quis ultrices purus. Curabitur sagittis tempus risus nec congue. Donec a felis nec dui interdum condimentum et a tortor. Quisque eget diam vitae turpis tristique imperdiet nec eget est. Sed gravida nec orci ac feugiat. Nulla et erat neque. Integer sit amet velit ornare quam rutrum tincidunt. Ut sollicitudin, nisi at porttitor maximus, nisi dui volutpat massa, non dictum diam nisi id nisi. Sed pretium ligula vitae sollicitudin bibendum. Donec viverra lorem et lectus elementum, imperdiet tempor erat cursus. Aliquam id viverra purus. In hac habitasse platea dictumst. Phasellus vel libero ac sem mollis auctor eu vitae libero. Mauris sit amet metus condimentum, consectetur tellus eget, ullamcorper orci. Donec vel arcu eros. Pellentesque vitae nulla a nisi mattis malesuada ac in dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse rhoncus tempor purus eu gravida. Pellentesque sollicitudin, elit eu cursus finibus, quam est cursus justo, at iaculis orci neque quis elit. Aliquam auctor vel leo sit amet faucibus. Maecenas neque diam, pretium sit amet nisi non, eleifend tempus elit. Pellentesque pulvinar turpis elit, in tempus ex efficitur sed. Morbi ornare elementum enim. Donec venenatis pellentesque ante, laoreet pretium leo varius in. Aliquam eu sapien vitae nibh imperdiet consectetur. Nunc ultricies venenatis nisi quis sagittis. In hac habitasse platea dictumst. Aenean malesuada placerat neque id congue. Pellentesque sagittis euismod quam, vel convallis diam. Nunc scelerisque nibh nec congue finibus. Pellentesque non lacinia nibh, id accumsan eros. Aliquam feugiat fringilla sem. Vivamus porta metus in libero cursus, et ornare elit eleifend. Phasellus venenatis pellentesque venenatis. Nullam feugiat condimentum justo, et molestie sapien varius eget. Curabitur suscipit ex vel erat luctus, consectetur aliquet enim placerat. Vivamus id vehicula dolor, nec volutpat lectus. Integer lacinia, dolor et rhoncus blandit, sapien leo fringilla risus, nec maximus libero erat eget quam. Sed sit amet magna purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<section class="section three">
<h2>Three</h2>
</section>
<section class="section four">
<h2>Four</h2>
</section>
</main> Top
<!-- Footer -->
<footer class="fixed_footer">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
</div>
</footer>
</body>
CSS
/* Fonts */
#import url(http://fonts.googleapis.com/css?family=Teko:700);
#import url(http://fonts.googleapis.com/css?family=Exo:400,900);
#import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,900italic,900,700italic,700,500italic,500,400italic);
#import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
#import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* Body */
* {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif
}
/* Header */
/* Shrinking */
/* ClearFix */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
font-family: "Teko", sans-serif;
top: 30px;
*zoom: 1;
width: 100%;
height: 100px;
background: #02236a;
position: fixed;
z-index: 9999;
box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}
/* Header Styles */
.small {
height: 80px;
}
.small .logo {
width: 240px;
height: 80px;
}
.nav {
width: 80%;
}
.logo {
float:left;
}
/* Transitions */
header, .logo {
-webkit-transition: all 1s;
transition: all 1s;
}
/* Navigation */
ul li {
float: left;
margin-left: 50px;
padding-top: 45px;
color: #fafafa;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul li:hover {
color: #ffba00;
}
/* Social Icons */
.sicf {
z-index: 9999;
position: fixed;
height: 30px;
width: 100%;
background-color: #001f4c;
}
/* Icons */
#social-icons li {
float: left;
}
.facebook, .google, .twitter, .youtube {
-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;
}
.facebook:hover {
background-color: #3b5998;
}
.google:hover {
background-color: #dd4b39;
}
.twitter:hover {
background-color: #00aced;
}
.youtube:hover {
background-color: #92291b;
}
/* Main Content */
*,
*:before,
*:after {
box-sizing: border-box;
font: 300 1em/1.5 'Merriweather', serif;
color: #242424;
padding: 0;
margin: 0;
}
html,
body {
background: rgb(236, 240, 241);
}
.content {
margin: auto;
margin-bottom: 350px;
/* Same height as footer */
}
/* Slider */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
z-index: 10;
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
/* Top Button */
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3d4942 url(../IMG/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 0.6;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 0.6;
}
/* Footer */
.fixed_footer {
width: 100%;
height: 350px;
background: #111;
position: fixed;
left: 0;
bottom: 0;
z-index: -100;
}
.fixed_footer p {
color: #696969;
column-count: 2;
column-gap: 50px;
font-size: 1em;
font-weight: 300;
}
/* Miscellaneous */
a {
text-decoration: none;
}
li {
list-style: none;
}
/* Font Fix */
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
/* Delete */
.section {
max-width: 100%;
height: 42em;
padding: 10px;
}
.section h2 {
color: #fff;
font-size: 6em;
font-weight: 200;
text-align: center;
padding: 2.5em 0;
}
.one {
background: #6bb6ff;
}
.two {
background: #1E90FF;
}
.three {
background: #8B4789;
}
.four {
background: #872657;
}
Also, here is a rough fiddle.
The following line (#136 in big.css) is the culprit:
font: 300 1em/1.5 'Merriweather', serif;
This overwrites the previous font declaration of "Roboto" to "Merriweather", which isn't loaded anywhere.
Also, don't forget to add a trailing semicolon to font-family: "Roboto", sans-serif.
Your browser's builtin developer tools, namely the element inspector, are your best friend when it comes to troubleshooting CSS.
In this particular case, I opened the Chrome Dev Tools element inspector by pressing CTRL+SHIFT+I, navigated to the "Elements" tab (you can also right-click a specific element) and looked through the CSS rules applied the the body element, which revealed the overwrite:
A strike-through informs you that a rule wasn't applied, possibly because it is invalid or another rule took precedence.