HTML video elements can be easily zoomed in and out using simple CSS properties. In this tutorial, we’ll show you how to create a zoom effect for your video elements when you hover over them.
Step 1: Create the HTML structure
First, let’s create a simple HTML structure with a video element inside a container element. We’ll give the container element a class of .video-container.
]]>
Step 2: Add CSS for the video and container
Next, we’ll add some CSS to style the video and its container. We’ll make the container element relatively positioned and hide any overflow content. This ensures that when the video is zoomed in, it won’t overflow outside the container boundaries. Set the video width to 100% so that it fills the entire container width.
.video-container {
position: relative;
overflow: hidden;
}
.video-container video {
width: 100%;
height: auto;
}
]]>
Step 3: Add the zoom effect on hover
Now, we’ll add the zoom effect when the user hovers over the video. We’ll use the CSS transform property to scale the video element up. Add the following CSS rule to your stylesheet:
.video-container:hover video {
transform: scale(1.5);
transition: transform 0.5s;
}
]]>
The transform: scale(1.5) property scales the video up by 1.5 times its original size, and the transition: transform 0.5s property adds a smooth transition effect when the video is zoomed in and out.
Final Result
With these simple steps, you’ve successfully added a zoom effect to your HTML video elements. When you hover over the video, it will smoothly zoom in, and when you move the cursor away, it will zoom out to its original size.
