{ A destination to learn coding }

Give colour tint to the images

unsplash-logoJoey Pilgrim
Html Script


<div class="imgcontainer">
   <img src="images/img1.jpg"/>
</div>
CSS code

div.imgcontainer{
background-color:red;
width:718px;
height:600px;
}

img{
width:inherit;
height:inherit;
opacity:0.8;
}	

	

In the above example, the div tag acts as the container for an image. Div tag is given a background colour of red. The image is given a transparancy of 0.2 (opacity:0.8), due to which dull red background color can be seen.


In the images below, there is a colour difference in both the images. The first image is the original one and the second image is after css effects.

CSS code for the second image

div.imgcontainer{
background-color:black;
}

img{
opacity:0.9;
}	

	

Change in colour

Change in opacity