CODEWITHSUNDEEP
cssimage
yoyojs
yoyojs

Reputation: 1773

Gradient on the bottom of an image with css

Hello i want to have this kind of effect with an image (which is not a background image) : enter image description here

Do u have any idea how i can create this effect with css ?

Upvotes: 1

Views: 13549

Answers (2)

harsha motwani
harsha motwani

Reputation: 56

You can use a container with gradient, outside the img and set negative z-index of image to push it behind container.

<div class="gradient-bg"> <img src="http://img.phombo.com/img1/photocombo/1634288/hd-wallpapers-scenic-desktop-wallpaper-beautiful-fresh-nature-scenery-sunrise-1920x1080-wallpaper.jpg"> <span>Hello There</span> </div>

.gradient-bg{
display: inline-block;
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(249, 249, 249, 0.89) 100%);
background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
span{
position: absolute;
top: 183px;
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;

}

Use image height width and gradient accordingly.

This is sample code for the solution

Upvotes: 0

ata
ata

Reputation: 3640

Look at this:

img {
  width: 400px;
}

.content {
  background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0;
  position: relative;
  margin-top: -200px;
  height: 200px;
}
<img src="http://www.dl.21tech.ir/img-upload/2016/12/95092801.jpg" />
<div class="content"></div>

Upvotes: 1

Related Questions