I am working on a marquee that displays different images. The marquee is working alright, however, the background linear-gradient I am using for giving a cool effect is not.
The goal is that the images fade in from the right to fade out on the left, but the images are on top of the gradient. I even tried to use a div inside of the marquee with a high z-index, but with the same result.
Here I leave a MWE of what I have done:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
padding-top: 6.5rem;
padding-bottom: 6.5rem;
background-color: white;
}
.marquee {
display: flex;
overflow: hidden;
gap: 0.3rem;
padding-top: 2rem;
padding-bottom: 2rem;
background: rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(9, 9, 121, 0) 35%, rgba(0, 212, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
background-origin: content-box;
background-clip: content-box;
}
.track {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18rem;
animation: scroll 20s linear infinite;
position: relative;
}
.image-marquee img {
width: 100%;
height: 6rem;
position: relative;
}
@keyframes scroll {
from {
transform: translateX(calc(100% + 18rem));
}
to {
transform: translateX(calc(-100% - 18rem))
}
}
/* Test
#mcover{
z-index:10;
background: rgb(255,255,255);
background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 25%, rgba(0,212,255,0) 75%, rgba(255,255,255,1) 100%);
}
*/<div class="main">
<div class="marquee">
<div class="track">
<div class="image-marquee">
<img src=".jpg">
</div>
<div class="image-marquee">
<img src=".jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
</div>
<!--
Cover attempt
<div id="mcover"></div>
-->
</div>
</div>
</div>I am working on a marquee that displays different images. The marquee is working alright, however, the background linear-gradient I am using for giving a cool effect is not.
The goal is that the images fade in from the right to fade out on the left, but the images are on top of the gradient. I even tried to use a div inside of the marquee with a high z-index, but with the same result.
Here I leave a MWE of what I have done:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
padding-top: 6.5rem;
padding-bottom: 6.5rem;
background-color: white;
}
.marquee {
display: flex;
overflow: hidden;
gap: 0.3rem;
padding-top: 2rem;
padding-bottom: 2rem;
background: rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(9, 9, 121, 0) 35%, rgba(0, 212, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
background-origin: content-box;
background-clip: content-box;
}
.track {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18rem;
animation: scroll 20s linear infinite;
position: relative;
}
.image-marquee img {
width: 100%;
height: 6rem;
position: relative;
}
@keyframes scroll {
from {
transform: translateX(calc(100% + 18rem));
}
to {
transform: translateX(calc(-100% - 18rem))
}
}
/* Test
#mcover{
z-index:10;
background: rgb(255,255,255);
background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 25%, rgba(0,212,255,0) 75%, rgba(255,255,255,1) 100%);
}
*/<div class="main">
<div class="marquee">
<div class="track">
<div class="image-marquee">
<img src="https://brandingforthepeople/wp-content/uploads/2019/04/Stock-Photography-vs-Real-Imagery.jpg">
</div>
<div class="image-marquee">
<img src="https://media.istockphoto/id/1435220822/photo/african-american-software-developer.jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
</div>
<!--
Cover attempt
<div id="mcover"></div>
-->
</div>
</div>
</div>Do you guys know what is the problem? I have looked on others people responses using gradients for these types of effects but I do not seem to be cracking it. Thanks in advance for the help.
Share Improve this question edited Mar 30 at 18:16 Mister Jojo 22.5k6 gold badges25 silver badges44 bronze badges asked Mar 30 at 18:04 Th3W31rd0Th3W31rd0 1138 bronze badges 01 Answer
Reset to default 2The image are contained in the murquee, and would always appear above the background. You can use an absolute positioned pseudo-elemet (the ::before) with z-index: 1 to create a layer with the background above the images:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
padding-top: 6.5rem;
padding-bottom: 6.5rem;
background-color: white;
}
.marquee {
position: relative;
display: flex;
overflow: hidden;
gap: 0.3rem;
padding-top: 2rem;
padding-bottom: 2rem;
background: rgb(255, 255, 255);
background-origin: content-box;
background-clip: content-box;
&::before {
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(9, 9, 121, 0) 35%, rgba(0, 212, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
content: "";
}
}
.track {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18rem;
animation: scroll 20s linear infinite;
position: relative;
}
.image-marquee img {
width: 100%;
height: 6rem;
position: relative;
}
@keyframes scroll {
from {
transform: translateX(calc(100% + 18rem));
}
to {
transform: translateX(calc(-100% - 18rem))
}
}
/* Test
#mcover{
z-index:10;
background: rgb(255,255,255);
background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 25%, rgba(0,212,255,0) 75%, rgba(255,255,255,1) 100%);
}
*/<div class="main">
<div class="marquee">
<div class="track">
<div class="image-marquee">
<img src="https://brandingforthepeople/wp-content/uploads/2019/04/Stock-Photography-vs-Real-Imagery.jpg">
</div>
<div class="image-marquee">
<img src="https://media.istockphoto/id/1435220822/photo/african-american-software-developer.jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
</div>
<!--
Cover attempt
<div id="mcover"></div>
-->
</div>
</div>
</div>Another option to move the .track layer under the .murquee by using position: relative; and z-index: -1;. You'll than have to use the container of .murquee (the .murquee-container) to prevent it from sliding under the white background by using isolation: isolate;:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.marquee-container {
isolation: isolate;
padding-top: 6.5rem;
padding-bottom: 6.5rem;
background-color: white;
}
.marquee {
display: flex;
overflow: hidden;
gap: 0.3rem;
padding-top: 2rem;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(9, 9, 121, 0) 35%, rgba(0, 212, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
background-origin: content-box;
background-clip: content-box;
}
.track {
position: relative;
z-index: -1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18rem;
animation: scroll 20s linear infinite;
position: relative;
}
.image-marquee img {
width: 100%;
height: 6rem;
position: relative;
}
@keyframes scroll {
from {
transform: translateX(calc(100% + 18rem));
}
to {
transform: translateX(calc(-100% - 18rem))
}
}
/* Test
#mcover{
z-index:10;
background: rgb(255,255,255);
background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 25%, rgba(0,212,255,0) 75%, rgba(255,255,255,1) 100%);
}
*/<div class="marquee-container">
<div class="marquee">
<div class="track">
<div class="image-marquee">
<img src="https://brandingforthepeople/wp-content/uploads/2019/04/Stock-Photography-vs-Real-Imagery.jpg">
</div>
<div class="image-marquee">
<img src="https://media.istockphoto/id/1435220822/photo/african-american-software-developer.jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
</div>
<!--
Cover attempt
<div id="mcover"></div>
-->
</div>
</div>
</div>