Introduction of Image Hover Zoom Effect
Hello! Everyone, today we are here to present our new Image Hover Zoom Effect, which is the Image Hovering Effect Gallery. It was made with the help of HTML and CSS. In this project, there will be some images in two rows with a black background that is bent right or left to some degree. When users hover over one particular image. That image will be in its original form, increase in size, and cover half of the screen. This is going to be very helpful for you, as you can use it to store your favorite memories captured in photos in it, or you can use it on your website to store some images about your product.
Let’s start making this project with the help of simple CSS (Cascading Style Sheet). We have used here a basic concept that will not be very complicated. Can be understandable to everyone, be it a beginner or an experienced guy. If you’ll have to face any problems while understanding the code. Then you can contact us through the details given in the footer of the page.
HTML (Hypertext Markup Language)
First, we will create the structure of the Responsive Image Zoom on Hover with the help of HTML (the hyper-markup language used to make the structure of any web page on a website). In this, we will give the title of the project in the title tag (which is used to give the title of the web page). Then we will move toward the main content of the project. In this, we will make a three-paragraph tag (which is used to write some paragraph about the heading) in which all the images will be inserted in three rows. Now we will insert three images in the img tag (which is used to insert the image). Then we will copy the image and paste it in another two paragraph tags and change the image also.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p>
<img src="https://img.freepik.com/free-photo/mythical-dragon-beast-anime-style_23-2151112835.jpg?t=st=1719745015~exp=1719748615~hmac=0a72898c7058613472958f0224a6234f078bff1ff93a92d8fb07f8da37946a57&w=740">
<img src="https://img.freepik.com/free-photo/black-white-illustration-man-with-short-hair-black-white-face_188544-12868.jpg?t=st=1719745184~exp=1719748784~hmac=3776bb340830376df19dfe9aed9c97345b6fc0355f846cae2f0aadd3f42aef13&w=740">
<img src="https://img.freepik.com/free-photo/fantasy-anime-style-scene_23-2151135000.jpg?t=st=1719745198~exp=1719748798~hmac=5a2730d2015db9a490e4a742d9b89f19ee5f093aec49a0a2579cd4f19e97a2ca&w=740">
<img src="https://img.freepik.com/free-photo/anime-character-traveling_23-2151278822.jpg?t=st=1719745210~exp=1719748810~hmac=f5cc1bbbe543a2a512f969a5edc04fef90d312d96c96177494cc752fe71d5e1c&w=740">
<img src="https://img.freepik.com/free-photo/anime-style-character-space_23-2151133909.jpg?t=st=1719744270~exp=1719747870~hmac=5ee427fec0e2bf0da87a267f3fdcc1aeb3043b5d313e35b339bcb04b3969f500&w=740">
</p>
<p>
<img src="https://img.freepik.com/free-photo/anime-style-mythical-dragon-creature_23-2151112870.jpg?t=st=1719745272~exp=1719748872~hmac=0800750db529c72022155537c8aaf8629823a8b0f1c8bc017aebbf4a21b2495c&w=740">
<img src="https://img.freepik.com/free-photo/anime-style-mythical-dragon-creature_23-2151112764.jpg?t=st=1719745282~exp=1719748882~hmac=90eaa36201d6e822b0f23de6bcc43231e1c29ccd2e4fc278864393d32456b432&w=740">
<img src="https://img.freepik.com/free-photo/beautiful-anime-character-cartoon-scene_23-2151035267.jpg?t=st=1719745296~exp=1719748896~hmac=4acdc3821c0ae636312496f4031307bc449773bfd4d758817aa91f2cb99a1e2a&w=740">
</p>
<p>
<img src="https://img.freepik.com/free-photo/side-view-ninja-wearing-equipment_23-2150961054.jpg?t=st=1719745313~exp=1719748913~hmac=6f76386c211b99642149e4b597a9e85d6d3616e7ac458960abc0d75dd05134b8&w=740">
<img src="https://img.freepik.com/free-photo/silhouetted-couple-sit-bench-autumn-tree-generative-ai_188544-12574.jpg?t=st=1719745332~exp=1719748932~hmac=52012ecd318f5f42efcb14889b2b7c6fbf1c1b932ba34176ded7b7fea86d8f4f&w=740">
<img src="https://img.freepik.com/free-photo/anime-style-mythical-dragon-creature_23-2151112868.jpg?t=st=1719745349~exp=1719748949~hmac=12946ffa1bc36fe230731b209712ab44afae423aa3128bfe7e137f41da816361&w=740">
<img src="https://img.freepik.com/free-photo/mythical-dragon-beast-anime-style_23-2151112837.jpg?t=st=1719745369~exp=1719748969~hmac=74e9ce8e26ed5153cf187b2d7d458b874f904ef9d114b50735dd0a4d6a480623&w=740">
</p>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of this Responsive Image Zoom on Hover, we will now give it some styling and hovering effects with the help of CSS (Cascading Style Sheet is used to give the styling to the HTML page and to make a responsive website). In this, we will first put the whole content in the center of the page. Then we will give the background black using the background property in CSS. Then we will move toward the medium content of the image. In which we will set the size and position of all three tags. Then we will adjust the size and position of all images in all those three tags. In this, we will use a new property of CSS that is offset (the offset CSS property is a shorthand property for animating an element along a defined path).
Now we will apply the hovering effect, in which when the user hovers over a particular image. That image will increase in size and cover half of the screen.
body{
background-color: black;
}
p {
height: 200px;
width: 500px;
margin: 100px auto;
position: relative;
}
img {
height: 100px;
position: absolute;
left: 0;
offset-path: path('m 0 50 q 50-30 100-30 t 100 30 100 0 100-30 100 30');
box-shadow: 1px 1px 3px #0008;
transition: transform .4s ease-out, offset-path .4s cubic-bezier(.77,-1.17,.75,.84),box-shadow .3s, z-index .3s;
z-index: 0;
}
img:hover {
transform: scale(3);
/* on hover, the path gets a bit shorter & flattened & shifted to left/bottom a bit for nicer movement */
offset-path: path('m 5 65 q 45-0 90-0 t 90 0 90 0 90-0 90 0');
box-shadow: 3px 4px 10px #0006;
/* ensures that image gets on top of stack at the start of "popping" animation
and gets back at the end of getting back. With smaller value, 2 different transitions would be needed */
z-index: 999;
border-radius: 3%;
}
/* 3 images */
img:nth-last-child(3):first-child {
offset-distance: 17%;
}
img:nth-last-child(2):nth-child(2) {
offset-distance: 49%;
}
img:last-child:nth-child(3) {
offset-distance: 81%;
}
/* 4 images */
img:nth-last-child(4):first-child {
offset-distance: 10%;
}
img:nth-last-child(3):nth-child(2) {
offset-distance: 35%;
}
img:nth-last-child(2):nth-child(3) {
offset-distance: 65%;
}
img:last-child:nth-child(4) {
offset-distance: 90%;
}
/* 5 images */
img:nth-last-child(5):first-child {
offset-distance: 0%;
}
img:nth-last-child(4):nth-child(2) {
offset-distance: 25%;
}
img:nth-last-child(3):nth-child(3) {
offset-distance: 51%;
}
img:nth-last-child(2):nth-child(4) {
offset-distance: 75%;
}
img:last-child:nth-child(5) {
offset-distance: 100%;
}Output of Image Hover Zoom Effect
Now finally, we have made this Image Hover Zoom Effect using the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). I hope you understood the code perfectly and that it is very useful for you. You can make such a project by taking ideas from here, or you can just copy and paste it. You should change their styling according to your preferences. If you want the source code, then click on the button given below to download it.
For more explanation, click on the link given below to watch the full video of Responsive Image Zoom on Hover.
You can also check:
