Change Image Opacity on Mouse Over

In this tutorial, we will learn how to change image opacity on the mouse over using CSS? By Apurva Mathur Last updated : July 24, 2023

Let's begin this topic by learning a bit about opacity property.

So, what is the purpose of opacity property?

The opacity property helps us to make text/images go transparent according to our preference. This can make your webpage look ravishing when used perfectly. We often use RGBA color codes in this to define the color of transparency and we apply opacity by giving one extra parameter into this RGBA code whose value will be from 0.0 to 1.0. These values fundamentally define the level of transparency we want. This value shows an effect in the form of increasing to decreasing (i.e.) 0.0 will be the most transparent one in comparison to 1.0. We can use this property with RGBA color code or we can also use this directly by specifying opacity.

To change the opacity on mouse hover we'll directly use selector: hover and we'll provide the opacity value.

Syntax

selector:hover{
    opacity:value
}

Example

<!DOCTYPE html>

<html>
   <head>
      <style>
         .img1{
         width:370px;
         height:300px;
         }
         .img1:hover{
         opacity: 0.2 ;
         }
         .img2{
         width:370px;
         height:300px;
         }
         .img2:hover{
         opacity: 0.5;
         }
      </style>
   </head>
   
   <body>
      <img class="img1" src="https://rukminim1.flixcart.com/image/416/416/poster/g/v/t/poster-nature-poster-collection-of-beautiful-nature-landscapes-original-imaej2hr5g25hnby.jpeg?q=70" >
      <img class="img2" src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSzehy7BWjkluj8hj5wEtB9asMf-tZ8lWiyg&usqp=CAU" >
   </body>
</html>

Output

Example: Change Image Opacity on Mouse Over

Explanation

Here, I've taken two image tags and I've provided a unique class to these tags as this will be used as a selector for styling these image tags. After that just specify the links of the image enclosed with the URL keyword. Talking about the CSS part, give the appropriate height and width to the image and use the hover selector and specify the opacity.

CSS Examples »

How margin and padding properties work?

How to create an unordered list without bullets using CSS?