<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom in Zoom Out Image</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="imgBox">
<img src="https://runastore.pe/media/catalog/product/cache/1/image/1600x/
040ec09b1e35df139433887a97daa66f/c/w/cw4554-400_1_1.jpg" alt="">
</div>
<div class="details">
<div class="content">
<h2>Why do we use it?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis itaque
accusamus molestias, magni officiis fugit nam quia maiores, repellat
sapiente autem. Sunt repellat fugiat repellendus quos explicabo voluptates
iure excepturi!</p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="https://www.sportline.com.pa/media/catalog/product/d/m/dm9922-200-
phsrh000-2000.png?optimize=medium&bg-
color=255,255,255&fit=bounds&height=700&width=700&canvas=700:700&format=jpeg"
alt="">
</div>
<div class="details">
<div class="content">
<h2>Where can I get some?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
necessitatibus molestias fuga autem accusantium ipsam laboriosam veritatis
harum error eum, corrupti, odit nemo perspiciatis hic eligendi inventore
aliquid quibusdam. Sapiente!</p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img
src="https://photos.encuentra24.com/t_or_fh_l/f_auto/v1/pa/23/77/81/56/23778156_245
c9f" alt="">
</div>
<div class="details">
<div class="content">
<h2>Where does it come from?</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus,
aut harum alias reprehenderit odit, aliquam iusto cumque voluptas illum
sint earum eaque officia nihil a debitis nulla doloremque natus doloribus.</p>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
html, body {
width: 100%;
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(../image/Wall__Bx.jpg);
background-repeat: no-repeat;
background-size: auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image:
url(https://png.pngtree.com/thumb_back/fh260/background/20230320/pngtree-at-full-
speed-running-man-in-blue-sport-wear-on-black-photo-image_1948757.jpg);
background-size: cover;
transition: 0.5s;
}
.container{
width: 1280px;
height: 100%;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.container .box{
position: relative;
width: 300px;
height: 300px;
background: rgb(25, 16, 143);
margin: 10px;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
}
.container .box .imgBox{
position: relative;
overflow: hidden;
}
.container .box .imgBox img{
width: 100%;
height: 400px;
object-fit: cover;
object-position: center top;
transition: 2s;
transform: scale(1.2);
}
.container .box:hover .imgBox img{
transform: scale(1);
}
.container .box .details{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fffff7;
transition: 1s;
opacity: 0;
filter: blur(10px);
transform: scale(1.5);
}
.container .box:hover .details{
opacity: 1;
filter: blur(0px);
transform: scale(1);
}
.container .box .details .content{
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
padding: 15px;
}
.container .box .details .content h2{
margin: 0;
padding: 0;
font-size: 20px;
color: #262626;
}
.container .box .details .content p{
margin: 10px 0 0;
padding: 0;
line-height: 24px;
color: #262626;
}
@media screen and (max-width: 1266px) {
.container {
width: 100%;
align-items: center;
justify-content: center;
}
.container .box {
display: block;
}
}
</body>
</html>
