Hello brathers and Sisters, How are you? Recently I was stuck in applying a gradient on an image. I applied these many times, but sometimes our requirements bind us to implement the solution in a specific way. We can apply the gradient to the image in many ways but we will discuss the two most used types of gradient implementation.
Background and gradient Implemented using CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
}
#grad1{
background-image:
linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.99)),
url('https://wallpapers.com/images/featured/2ygv7ssy2k0lxlzu.jpg');
width: 400px;
height: 400px;
background-size: cover;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div id="grad1">
<h1>hello world</h1>
</div>
</body>
</html>
Apply Gradient on HTML img Element
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
}
.new{
width:200px;
height:200px;
object-fit:cover;
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.99));
postion:relative;
z-index:5;
}
.new > img{
position:absolute;
z-index:-1;
width:200px;
height:200px;
object-fit:cover
}
</style>
</head>
<body>
<div class="new">
<img src="https://wallpapers.com/images/featured/2ygv7ssy2k0lxlzu.jpg" />
<p>This text will written on image</p>
</div>
</body>
</html>Point To Remember:-
- If you want to fade the effect from top to bottom on the image then use a gradient with color transparent where to start and background color where to end the fade effect like:
linear-gradient(to bottom, transparent,rgba(0, 0, 0, 0.99));If this is valuable please subscribe the channel Tech 9-on.
OK Guys, Tata Bye Bye….. Maze kro…
Continue Learning…….
