how to make object transparent

To make progress in web design, designers need to learn css properly and not relaying on libraries, already written code. What really qualify a web designer is the ability to think fast, the ability to make creative things using css from scratch.

In this article I want to teach you how to make image or div element transparent using pure css. Maybe you know all about css transparency, but you will only grow if you keep looking for problem to solve.

It is not difficult to make any object transparent. Css opacity style property enable web designers make visible elements transparent.

So now we have the following pretty image which we want to make transparent.


<img class=’transparency’ src=’ C:\Users\Jere\Desktop\site logo.jpg’ atl=’transparent image’ />

Then our image styling will be the following code.

<style type=”text/css”>
div.transparency
{
max-width: 100%
Height: auto;
Opacity: 0.5;
Filter:alpha (Opacity=50);
}
</style>

The first code we include the image direct in the web page while the second code we set the image maximum width to 100% and height to auto, then the opacity to 0.5. Opacity is the main property the makes the image transparent. I set it to 0.5, but you can change it to your prefer level.

To increase the transparency, just keep decreasing the opacity from 0.5 down.

The image will be transparent even without the filter:alpha (opacity=40); specification, but it is advisable you include it for better interpretation.

Very important notice: If you take it down to 0.0 the image will disappear totally from the web page. Therefore, keep it at the minimum of 0.4 or even 1.5 if it is ok for you.

Very simple, right? That’s all my next post will be how to make image the page background color. Ensure you share and follow up for new updates.