Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change Image Opacity on Mouse Over
Use the opacity property with the :hover selector to change the opacity on mouse-over. The following is the code to change image opacity on mouse over.
Change the image Opacity
The following is the image we need to change the opacity on mouse over. We have used the <img> element to set the image −
<img class="transparent" src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" >
The image class is set with the opacity property value as 1 initially i.e., the actual image −
.transparent{
width:270px;
height:200px;
opacity: 1;
transition: 0.3s;
}
The opacity on image hover is set using the :hover selector −
.transparent:hover{
opacity: 0.3;
}
Example
Let us see an example to change the image opacity on mouse over −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.transparent{
width:270px;
height:200px;
opacity: 1;
transition: 0.3s;
}
.transparent:hover{
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Image opacity on hover example</h1>
<img class="transparent" src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" >
<p>Hover over the above image to change its opacity</p>
</body>
</html>
Change the Image Opacity to Fully Transparent
To change the image opacity to fully transparent, set the opacity level of an element to 0 i.e. −
opacity: 0;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.transparent{
width:270px;
height:200px;
opacity: 1;
transition: 0.3s;
}
.transparent:hover{
opacity: 0;
}
</style>
</head>
<body>
<h1>Image opacity on hover example</h1>
<img class="transparent" src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" >
<p>Hover over the above image to change its opacity</p>
</body>
</html>
Change the Image Opacity to Full Opaque
To change the image opacity to fully opaque, set the opacity level of an element to 1i.e. −
opacity: 1;
Example
Let us see the example. Here, the image will be visible on mouse over using the opacity property −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.transparent{
width:270px;
height:200px;
opacity: 0;
transition: 0.3s;
}
.transparent:hover{
opacity: 1;
}
</style>
</head>
<body>
<h1>Image opacity on hover example</h1>
<img class="transparent" src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" >
<p>Hover over the above image to display it/p>
</body>
</html>
1K+ Views
