Introduction of Image zoom on hover
Hello! Guys, we are today presenting you our new and latest project. Which is Image Zoom on Hover with an amazing hovering effect that is made with the help of HTML and CSS. In this project, there will be some images in a row in the center of the screen; height will be more and width will be less in the beginning. When the user hovers on a particular image, the width will increase. Some details, like the name of the image and their skills, will appear with some transition effect. When you take the mouse back, then everything will become the same as it was before hovering with the same transition.
Let’s start making this Image Hover Zoom Effect in Css with the help of the simple and easy code of HTM (Hyper Text Markup Language) and CSS (Cascading Style Sheet). The code is not going to be so hard as everyone can understand it without facing any problems. We have used here the basic concept of coding. This project is going to be very useful for you, as you can use it to store your favorite images or you can use it in your website to show the details of your content with a hovering effect. If you’ll have any doubt, then you can contact us through the details given in the footer of every page, as you can see.
HTML (Hyper Text Markup Language)
First we will make the structure of the Image Hover Zoom Effect with the help of HTML (Hyper Text Markup Language is used to make the structure of the web page of the website). In this, we will first give the title of the project in the title tag. (which is used to give the title of any topic). Then move toward the main body of the project. In which we will make a parent div. In this div, we will make four to five subdivs for the details of the image. We will insert the name in the h1 tag (which is used to give the heading) and their skills in the span tag.
<!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>
<div class="container">
<div>
<div class="content">
<h2>Jane Doe</h2>
<span>UI & UX Designer</span>
</div>
</div>
<div>
<div class="content">
<h2>Alex Smith</h2>
<span>CEO Expert</span>
</div>
</div>
<div>
<div class="content">
<h2>Emily New</h2>
<span>Web Designer</span>
</div>
</div>
<div>
<div class="content">
<h2>Lisa Boley</h2>
<span>Marketing Coordinator</span>
</div>
</div>
</div>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of the Image Hover Zoom Effect in Css, now we will give it some styling using CSS. (Cascading Style Sheet is used to give the styling to the web page.) Make it responsive to work also on other devices. In this we will give the background color. Take the parent div in the center of the screen and then move toward the main content of the project. In this, we will give the background images to all the subdivs. And then adjust the size and position of the divs and images.
We will design the name and skill tag, like color and size. We will hide the name and skills and also keep the width of images less in default case. When the user hovers, then the width of the image will increase. Texts written will also appear with some transition effect. When the user takes back its mouse, everything will become as in the default case.
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: #100721;
font-family: "Ubuntu Mono", monospace;
font-weight: 400;
}
.container {
width: 100%;
display: flex;
justify-content: center;
height: 500px;
gap: 10px;
> div {
flex: 0 0 120px;
border-radius: 0.5rem;
transition: 0.5s ease-in-out;
cursor: pointer;
box-shadow: 1px 5px 15px #1e0e3e;
position: relative;
overflow: hidden;
&:nth-of-type(1) {
background: url("https://images.pexels.com/photos/1845208/pexels-photo-1845208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
no-repeat 50% / cover;
}
&:nth-of-type(2) {
background: url("https://images.pexels.com/photos/36469/woman-person-flowers-wreaths.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
no-repeat 50% / cover;
}
&:nth-of-type(3) {
background: url("https://images.pexels.com/photos/1468379/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
no-repeat 50% / cover;
}
&:nth-of-type(4) {
background: url("https://images.pexels.com/photos/247322/pexels-photo-247322.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
no-repeat 50% / cover;
}
.content {
font-size: 1.5rem;
color: #fff;
display: flex;
align-items: center;
padding: 15px;
opacity: 0;
flex-direction: column;
height: 100%;
justify-content: flex-end;
background: rgb(2, 2, 46);
background: linear-gradient(
0deg,
rgba(2, 2, 46, 0.6755077030812324) 0%,
rgba(255, 255, 255, 0) 100%
);
transform: translatey(100%);
transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
visibility: hidden;
span {
display: block;
margin-top: 5px;
font-size: 1.2rem;
}
}
&:hover {
flex: 0 0 250px;
box-shadow: 1px 3px 15px #7645d8;
transform: translatey(-30px);
}
&:hover .content {
opacity: 1;
transform: translatey(0%);
visibility: visible;
}
}
}
Output of Image Zoom on Hover
Now finally, we have made this Image Zoom on Hover using the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). You can make such a project to increase your practice and knowledge, or you can use it as it is on your website. I hope this project is helpful for you, and I hope you got some fruitful knowledge from our project. If you want the source code, then click on the button given below to download the Image Hover Zoom Effect.
For more information, click on the link given below to watch the full video of Image Hover Zoom Effect Css.
You can also check related components of Image Hover Zoom Effect CSS.:
