Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
CSS Opacity that Works in All Browsers
The property opacity is the modern solution and works for Firefox , Safari, Opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the -khtml-opacity property is for safari versions starting with 1.
Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers −
.transparent {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Opacity That Works on all Browsers
For image opacity that works in all browsers, set the image to the following using the opacity property −
.transparent {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
img {
width: 270px;
height: 200px;
}
.transparent {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity for all browsers</h1>
<img src="https://www.tutorialspoint.com/hockey/images/hockey-mini-logo.jpg" />
<img class="transparent" src="https://www.tutorialspoint.com/hockey/images/hockey-mini-logo.jpg" />
<p>The second image above will get opaque on all browsers</p>
</body>
</html>
Opacity on Mouse Over That Works in all Browsers
To perform opacity on mouse over, use the :hover selector with the opacity property −
.transparent{
width:270px;
height:200px;
transition: 0.3s;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.transparent:hover{
opacity: 0.3;
}
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;
transition: 0.3s;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.transparent:hover{
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Image opacity on hover example</h1>
<img class="transparent" src=" https://www.tutorialspoint.com/cricket/images/cricket-mini-logo.jpg" >
<p>Hover over the above image to change its opacity</p>
</body>
</html>
Updated on: 2023-10-31T11:19:58+05:30
528 Views
Advertisements