From 5c612e5f6e064bc4f9f43b4d24341e3c81db8b1f Mon Sep 17 00:00:00 2001
From: Izwan Rusli <43311303+izwanrusli@users.noreply.github.com>
Date: Wed, 21 Nov 2018 21:55:21 +0800
Subject: [PATCH] Adding Transparent Hover Effect code (#21179)

* Adding Transparent Hover Effect code

* Update index.md

* Update index.md

* Update index.md

* Update index.md
---
 guide/english/css/background-opacity/index.md | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/guide/english/css/background-opacity/index.md b/guide/english/css/background-opacity/index.md
index ae75acaba5..40e697d737 100644
--- a/guide/english/css/background-opacity/index.md
+++ b/guide/english/css/background-opacity/index.md
@@ -12,7 +12,7 @@ Find more details <a href='https://www.w3schools.com/css/css_image_transparency.
 You can choose up to what extent you want to make the element transparent.
 You have to add the following CSS property to achieve the transparency levels.
 
-**Fully Opaque**
+#### Fully Opaque
 ```css
 .class-name {
   opacity:1;
@@ -24,14 +24,16 @@ OR
   opacity:1.0;
 }
 ```
-**Translucent**
+
+#### Translucent
 ```css
 .class-name {
   opacity:0.5;
 }
 Opacity value can be anything between 0 and 1;
 ```
-**Transparent**
+
+#### Transparent
 ```css
 .class-name {
   opacity:0;
@@ -52,9 +54,26 @@ Alternatively you can use a transparent rgba value like this:
  ```
 The example above sets the background to be black with 50% opacity. The last value of an rgba value is the alpha value. An alpha value of 1 equals 100%, and 0.5 (.5 for short) equals 50%. We use this method to add transparency to an element without affecting the content inside.
 
+
+#### Transparent Hover Effect
+The opacity property is often used together with the **:hover** selector to change the opacity on mouse-over:
+
+```
+img {
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+}
+
+img:hover {
+    opacity: 1.0;
+    filter: alpha(opacity=100);
+}
+```
+
 #### Some Info
 Using the rgba value is most preferable when the background has content like text compared to using the background-color property then going on to use the opacity property. First, it's shorter and second, it eliminates the problem of having the content's transparency change with that of its background, if it's something you do not want.
 
+
 [A codepen example to show background opacity ranges](https://codepen.io/lvcoulter/full/dVrwmK/)