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 ,
4 months 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 display text when hover over an iframe?
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?