Image opacity refers to the level of transparency or how much an image is see-through.
In CSS, image opacity can be controlled using the opacity property. The opacity property takes a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<img src="trol.jpg">
</body>
</html>
Our simple page.
img {
opacity: 0.5;
}
By setting the opacity property to a value between 0 and 1, you can make an image partially transparent. For example, opacity: 0.5; would make the image 50% transparent, allowing the content beneath the image to show through.
img {
opacity: 0.5;
}
img:hover {
opacity: 0.3;
width: 400px;
height: 400px;
float: right;
}
This CSS code sets the opacity of all images on the page to 0.5, meaning they will be semi-transparent.
The second rule sets up a hover effect on the images - when the user hovers over an image with their mouse, its opacity will change to 0.3, making it even more transparent. Additionally, the image will increase in size to 400px by 400px and float to the right.
No comments:
Post a Comment