Cara menggunakan opacity on click css

Seperti yang telah dijelaskan di atas, efek ini sering digunakan dan dipadukan sebagai hover effect. Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai efek hover.

Sebagaimana pada link (a) dan hover link (a:hover), kita pun dapat menerapkannya pada gambar.

img {opacity:1.0;filter:alpha(opacity=100;}
img:hover {opacity: 0.5;filter:alpha(opacity=50;}

Contoh (arahkan mouse ke atas gambar):

Atau sebaliknya, jika ingin gambar berubah jadi terang (tidak transparan) ketika mouse diarahkan diatasnya, tukar nilai transparansinya:

img {opacity: 0.5;filter:alpha(opacity=50;}
img:hover {opacity:1.0;filter:alpha(opacity=100;}

Membuat Efek Hover Transparan Pada Gambar Secara Individual (tanpa link)

Jika ingin membuat efek transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag <a> dan </a>):

.brl-transparan {opacity:1.0;filter:alpha(opacity=100);}
.brl-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:

<img class="brl-transparan" border="0" src="//urlgambar.com/image.jpg" />

Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link

Jika yang ingin diberi efek hover transparan adalah gambar yang mengandung link, maka dibutuhkan deklarator link (a) dan image (img) pada CSSnya:

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

opacity 0.2

opacity 0.5

opacity 1
(default)

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Propertyopacity4.09.02.03.19.0

Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).

CSS Syntax

opacity: number|initial|inherit;

Property Values

ValueDescriptionDemonumberSpecifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)Demo ❯initialSets this property to its default value. Read about initialinheritInherits this property from its parent element. Read about inherit

More Examples

Example

The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}

Example

To not apply opacity to child elements (like in the example above) use RGBA color values instead. The following example sets the opacity for the background color, but not for the text:

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Example explained

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.

When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:

Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).