How to change the opacity of an <iframe> element with hover?
How to change the opacity of an <iframe> element with hover?
1 answer
by
muriel.schmidt ,
a day ago
@shyann
You can change the opacity of an element with hover using CSS. Here's an example of how you can achieve this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Opacity of iframe Element on Hover</title>
<style>
iframe {
opacity: 1;
transition: opacity 0.3s;
}
iframe:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<iframe src="https://www.example.com" width="800" height="400"></iframe>
</body>
</html>
|
In this example, the opacity of the element is set to 1 (fully visible) by default. When the element is hovered over, the opacity is changed to 0.5 (50% visibility) using the :hover pseudo-class. The transition property is used to animate the opacity change with a duration of 0.3 seconds.
You can customize the opacity values and transition duration to achieve the desired effect for your element.
Related Threads:
How to show a hidden element on hover on tailwind?
How to change image on hover using tailwind css?
How to disable all mouse events except for hover in iframe?
How to change a color of a html element in a canvas?
How to change element html properties on click?
How to change value in random element of array in json in mysql 8?