With CSS, any HTML element can become (slightly or completely) transparent. The opacity property controls how opaque an element is, and it takes values between 0 and 1. So if you have an image that you want to be slightly transparent, all you need to do is determine how transparent you want it to be and apply a value between 0 (completely transparent) and 1 (completely opaque) using the opacity property, like this:
Join us in our newest publication:
- img{
- opacity: .6;
- }
As you can see, after the opacity is defined as .6, the image has become much more transparent. A common (and cool) use for this property is when creating hover effects. Having an image become slightly opaque on hover is a common design trend that is easy to apply using the opacity property.
- img:hover{
- opacity: .6;
- }