CODEWITHSUNDEEP
cssimagebackgroundstylesheetlinear-gradients
Chad Manz
Chad Manz

Reputation: 29

Only fade part of a background to white with CSS style sheet

I'm trying to use this code in a CSS stylesheet:

.layered-image {
   background: linear-gradient( to right, transparent, white 40% ),
       url("http://www.azlro.org/chad/images/IMG_3699-1920x1080.JPG");
}

...to fade the background image from the image itself to white from left to right. However, I want some of image (500 pixels) to not fade at all and then start fading from there. Is that possible?

Upvotes: 2

Views: 2577

Answers (3)

Belder
Belder

Reputation: 808

This can be achieved by using the ::before selector.
The ::before selector inserts something before the content of each selected element(s), in your case, the linear-gradient 'layer'.

I'm not totally sure this is what you are after, but hopefully this will guide you to a solution for your project. You will have to play around with the opacity, width and possibly other factors to get it exactly how you want.

As the above commenter suggested, you can add values to each color inside your linear gradient to determine the amount that you want to persist, such as:

linear-gradient(to right, transparent 500px, white);

html, body {
  width: 100%;
  height: 100%;
}

.layered-image {
  width: 100%;
  height: 100%;
  background: url('https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg') center center   no-repeat;
  background-size: cover;
}
  
.layered-image:before {
   content: '';
   position: absolute;
   background-image: linear-gradient(to right, transparent, white);
   opacity: 2.5; 
   height:100%;
   width:100%;
 }
<div class="layered-image">
</div>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 273649

Simply adjust the gradient:

.layered-image {
  height: 200px;
  background: linear-gradient( to right, transparent 0,transparent 200px /*edit this value*/ ,white 60%), 
  
  url("https://lorempixel.com/1000/800/") center/cover;
}
<div class="layered-image">
</div>

Upvotes: 0

supriya suresh g
supriya suresh g

Reputation: 385

Use opacity:

.layered-image {
     opacity:0.8;
}

Upvotes: 0

Related Questions