Geek Answers Handbook

CSS - linear gradient transparency on both sides of the image

TL; DR

Is it possible to add transparency to images in CSS using -webkit-linear-gradient on the left and right side of the image?

Long version

I have an image that I want to add transparency - with pure CSS - on either side of it, avoiding the use of any image editor such as Photoshop, Gimp, etc. I tried using -webkit-linear-gradient , but it uses the rgba () function to detect color stops.

So this fragment

 height: 200px; background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));

does the following:

enter image description here

In this example, the last parameter in rgba () determines the transparency of the color. So far, so good. If I put right in -webkit-linear-gradient , the image above would show the opposite. (You do not speak?!)

I want to somehow combine these two and create a gradient that will be transparent on both sides. Just not with a gradient. With an image.

I also tried to work with box-shadow and radial-gradient , but I could not understand.

Is it possible to add transparency to the left and right of the image using only CSS?

EDIT:

Example: enter image description here

+12
css css3 transparency linear-gradients
source share
2 answers

You can use a wrapper div and then use color stops:

 div { position: relative; display: inline-block; } div:before { content: ""; top: 0; left: 0; position: absolute; height: 100%; width: 100%; background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ } 
 <div> <img src="http://placekitten.com/g/300/300" alt="" /> </div>

Resources

+18
source share

 .image { position: relative; } .image::after { position: absolute; top:0; left: 0; right: 0; bottom: 0; content: ''; display: block; background-image: linear-gradient(to right, currentColor 5%, transparent 30%); } .image::before { position: absolute; top:0; left: 0; right: 0; bottom: 0; content: ''; display: block; background-image: linear-gradient(to left, currentColor 5%, transparent 30%); } 
 <div class="image"> <img src="http://placekitten.com/800/400"/> </div>

One way to do this is to use pseudo-classes and place them on top of each other. Make sure that the container with images is relatively located and it should work for you (see. Example).

0
source share

More articles:


All Articles