Fading sides of div tag with CSS image background
I am creating a website and I have an animation in my header. This image is a colored bar that animates from right to left on the loop to give the impression that it moves endlessly to the left.
What I would like to accomplish is to have a fade in / out effect to the left and right of the image, without affecting the animation of its background image.
This is my HTML:
<div id="hbaranim"><div id="hbarchild"></div></div>
And my current CSS (with animation only):
#hbaranim {
width: 100%;
height: 5px;
overflow-x: hidden;
padding-bottom: 10px;
padding-top: 10px;
}
#hbaranim #hbarchild {
position: relative;
width: 8524px;
height: 5px;
background-image: url("img/colorbartile.png");
background-repeat: repeat-x;
-webkit-animation: hbaranim_roll linear 245s infinite;
}
@-webkit-keyframes hbaranim_roll {
from { right: 0px; }
to { right: 2131px; }
}
Eddit: Currently there are two div tags using HTML, but they have no content in them, so using just one would probably be better (not sure how to be honest ...)
Eddit 2: just to clarify, the animating image is positioned against the background of the gradient, so just place another gradient above the image as some of you have suggested won't work in that case. It really should be transparent on the sides.
Eddit 3: Some of you have also suggested using a CSS gradient instead of an image, but the image I am using on my actual site contains some other details that would not be possible to replicate in CSS. In this example, I used an image that could actually be replicated using a CSS gradient quite easily.
Eddit 4: Updated script to include all header
source to share
To achieve this, you can use absolutely positioned pseudo-elements on a parent element with gradient backgrounds. You can also achieve the same effect with one div
.
UPDATE: After edit 3 in the original question, the rainbow gradient I used below can be replaced with an image file, the same principles apply.
Example
*{box-sizing:border:box;}
body{margin:0;}
.header{
background:radial-gradient(ellipse at center,#242424 0%,#141414 100%);
box-shadow:0px 0px 10px 3px rgba(0,0,0,.75);
height:150px;
position:relative;
}
h1{
color:#fff;
font-family:arial;
font-size:48px;
padding:25px 0 0;
margin:0;
text-align:center;
}
h2{
color:#fff;
font-family:arial;
font-size:24px;
line-height:25px;
margin:0;
text-align:center;
}
#hbaranim{
-webkit-animation:hbaranim_roll linear 10s infinite;
animation:hbaranim_roll linear 10s infinite;
background:linear-gradient(90deg,#f00 0%,#ff0 16.667%,#0f0 33.333%,#0ff 50%,#00f 66.667%,#f0f 83.333%,#f00 100%) 0 0 repeat-x;
background-size:200%;
bottom:10px;
height:5px;
position:absolute;
width:100%;
}
#hbaranim::before,#hbaranim::after{
content:"";
display:block;
height:100%;
position:absolute;
top:0;
width:25%;
z-index:1;
}
#hbaranim::before{
background:linear-gradient(90deg,rgba(20,20,20,1),rgba(20,20,20,0));
left:0;
}
#hbaranim::after{
background:linear-gradient(90deg,rgba(20,20,20,0),rgba(20,20,20,1));
right:0;
}
@-webkit-keyframes hbaranim_roll{
0%{
background-position:0 0;
}
100%{
background-position:200% 0;
}
}
@keyframes hbaranim_roll{
0%{
background-position:0 0;
}
100%{
background-position:200% 0;
}
}
<div class="header">
<h1>Name of Site</h1>
<h2>www.site.nl</h2>
<div id="hbaranim"></div>
</div>
If you're feeling adventurous, you can do it without nested div
( Fiddle ) or even without parent div
( Fiddle )
The following snippet was presented as an example, waiting for Ties to confirm that deleting a child div
was an option and included below as an entry.
#hbaranim{
overflow:hidden;
padding:10px 0;
position:relative;
width:100%;
}
#hbaranim #hbarchild{
background-color:#000;
height:20px;
position:relative;
width:8524px;
z-index:1;
}
#hbaranim::before,#hbaranim::after{
content:"";
display:block;
height:20px;
position:absolute;
top:10px;
width:20%;
z-index:2;
}
#hbaranim::before{
background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0));
left:0;
}
#hbaranim::after{
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1));
right:0;
}
<div id="hbaranim">
<div id="hbarchild"></div>
</div>
source to share