Aula CSS HTML imagens interativas

0 Comentários

Aula CSS HTML imagens interativas

Desenvolvimento de uma pagina que possui imagens que interagem com o cursor do mouse.

HTML

index.html

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”images.css“>
<title>Imagens Interativas</title>
</head>

<body>
<ul class=”container”>
<li>
<a href=”1.jpeg”><img src=”1.jpeg” alt=””>
<div class=”content”>
<span>
<H2>Imagem 1</H2>
<p>Descrição da imagem</p>
</span>
</div>
</a>
</li>
<li>
<img src=”2.jpg” alt=””>
<div class=”content”>
<span>
<H2>Imagem 2</H2>
<p>Descrição da imagem</p>
</span>
</div>
</li>
<li>
<img src=”3.jpeg” alt=””>
<div class=”content”>
<span>
<H2>Imagem 3</H2>
<p>Descrição da imagem</p>
</span>
</div>
</li><li>
<img src=”4.jpg” alt=””>
<div class=”content”>
<span>
<H2>Imagem 4</H2>
<p>Descrição da imagem</p>
</span>
</div>
</li><li>
<img src=”4.jpg” alt=””>
<div class=”content”>
<span>
<H2>Imagem 5</H2>
<p>Descrição da imagem</p>
</span>
</div>
</li>
</ul>

</body>
</html>

CSS

images.css

body{
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-emphasis: center;
background-color: orange;
}

.container{
width: 100%;
display: flex;
justify-content: center;
height: 300px;
gap: 16px;
transition: 0.3s;
}

.container li{
position: relative;
overflow: hidden;
flex: 0 0 100px;
cursor: pointer;
border-radius: 10px;
border: 1.2px solid #eee;
box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.4);
}

.container li img{
position: absolute;
top: 50%
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
object-fit: cover;
}

.container li, .container li img{
transition: 0.3s;
}

.container li, .content{
transition: 0.5s ease;
}

.container span{
text-align: center;
width: 75%;
}

.container h2{
font-weight: 400;
font-size: 20px;
line-height: 4px;
margin-bottom: 3px;
white-space: nowrap;
color: #eee;
}

.container p{
color: #ddd;
font-size: 10px;
width: 100%;
}

.container li .content{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
color: #fff;
padding: 15px;
background:
linear-gradient(
0deg,rgb(0 0 0 / 70%) 10%,
rgb(255 255 255 / 0%) 100%
);
opacity: 1;
visibility: visible;
}

.container:hover{
gap: 0;
}

.container li .content span{
position: absolute;
z-index: 3;
left: 50%;
bottom: 0px;
translate: -50%;
scale: 0.15;
visibility: hidden;
opacity: 0;
}

.container li:hover{
flex: 0 1 360px;
scale: 1.2;
z-index: 10;
opacity: 1;
}

.container li:hover{
opacity: 1;
visibility: visible;
}

.container li:hover span{
scale: 1;
opacity: 1;
visibility: visible;
}