<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
border-radius: 15px; /* Rounded edges */
box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
transition: transform 0.3s;
}
img:hover {
transform: scale(1.1); /* Zoom effect */
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/200" alt="Example">
</body>
</html>
Explanation:
border-radius: softens corners.box-shadow: adds shadow.hover+scale: zooms image when hovered.
Leave a Reply