NOTE: Make sure to download any image that you want for this effect or add a web link in the img tag (HTML CODE).
HTML Code:
<!DOCTYPE html>
: The doctype declaration specifies that this is an HTML5 document.<html>
: The opening tag for the HTML document.<head>
: The head element contains meta-information about the document, such as the title and links to external resources.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Sets the viewport properties for responsive design, ensuring proper rendering on various devices.<title>hover</title>
: Sets the title of the web page to "hover".<link rel="stylesheet" href="styles.css">
: Links the external CSS file named "styles.css" to the HTML document.</head>
: Closes the head section of the document.<body>
: The body element contains the visible content of the document.<img src="couple.png" height="300px">
: Inserts an image with the source "couple.png" and sets its height to 300 pixels.</body>
: Closes the body section of the document.</html>
: Closes the HTML document.
CSS Code:
-
img {
: Targets all<img>
elements in the HTML. -
--m: ...
: Defines a custom CSS variable (--m) that contains multiple radial-gradient values separated by commas. These gradients create a blend from solid black to transparency on both sides of the image. The variable is defined but not applied directly to any element. -
-webkit-mask: var(--m);
: Applies the custom CSS variable (--m) as the mask to the image for browsers that use the WebKit rendering engine (e.g., Safari). -
mask: var(--m);
: Applies the custom CSS variable (--m) as the mask to the image for other browsers that support the CSS mask property. -
filter: grayscale(.5);
: Applies a grayscale filter to the image, reducing its color saturation by 50%. -
transition: .3s linear;
: Specifies the transition property for the image, making the transition smooth with a duration of 0.3 seconds and a linear timing function. -
cursor: pointer;
: Changes the cursor to a pointer when hovering over the image, indicating it is interactive. -
}
: Closes the CSS rule for the<img>
element. -
img:hover {
: Targets the<img>
element when it is being hovered over by the cursor. -
-webkit-mask-position: 7.5% 50%, 92.5% 50%;
: Changes the position of the mask on hover to create the transition from the arc shape to a circle shape. The two values correspond to the x-axis and y-axis positions of the gradients, respectively. -
mask-position: 7.5% 50%, 92.5% 50%;
: Same as above but for non-WebKit browsers. -
filter: grayscale(0);
: Removes the grayscale filter on hover, restoring the image's original colors. -
}
: Closes the CSS rule for the<img>
element when it is being hovered over.