☆ This is an image zoom-free project which works on mouse hover. In this project, whenever we move the cursor on the image it shows some details related to the image.
☆ The source code of this project is freely available on my Free Projects1 Website and GitHub Profile.
☆ In this project, We can hide details using this project and we want to show details to the user, if the user hovers their mouse over it and if the user clicks it, we can redirect the user to our website or any particular page.
☆ This project is responsive means it successfully works on both mobile and desktop versions.
☆ Used languages are HTML, and CSS.
Project Source Code:
1.1 index file
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Image Zoom Effect on Mouse Hover | Free Projects1 </title>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<meta name="keywords" content="image zoom on hover css, freeprojects1.blogspot.com">
<meta name="description" content="This is an image zoom-free project which works on mouse hover. In this project, whenever we move the cursor on the image it shows some details related to the image.">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<p class="text">Hover me!</p>
<a href="https://freeprojects1.blogspot.com" target="_blank"><img src="img.jpg" alt="image loading error">
</a>
<div class="details">
<h2> Pooja Kumari </h2>
<h2>Age : 18</h2>
</div>
</div>
</body>
</html>
1.2 CSS file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: rgba(0, 0, 0, 0.1);
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .text{
text-align: center;
font-size: 18px;
font-family: cursive;
}
.container img{
width: 300px;
height: 310px;
border-radius: 5px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
box-shadow: 0 0 30px rgba(255, 255, 255, 1);
transition: 0.5s;
}
.container img:hover{
transform: scale(1.2);
transition: 0.5s;
}
.container .details{
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.2);
padding: 12px 12px;
border-radius: 5px;
opacity: 0;
transition: 0.1s;
}
.container .details h2{
color: #fff;
letter-spacing: 1px;
font-family: sans-serif;
filter: drop-shadow(0 0 3px #333);
}
.container:hover .details{
opacity: 1;
transition: 1s;
}
@media (max-width: 450px)
{
.container img{
width: 300px;
height: 290px;
}
.container img:hover{
transform: scale(1.2);
}
.container .details{
top: 85%;
}
}
@media (max-width: 370px)
{
.container img{
width: 250px;
height: 240px;
}
.container img:hover{
transform: scale(1.2);
}
.container .details{
top: 70%;
}
}
Learn Java Programming
☆ if you want to learn java programming freely, visit our official link...
Please do not enter any spam link in the comment box.