Dia 2/2019 - Cartão com CSS hover

Continuando a série com os 92 dias de código que realizei no ano passado. Nesse artigo temos o dia 2, mostrando a funcionalidade com o pseudo-classe :hover.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 2</title>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;
}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; }
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
</style>
<link rel="stylesheet" type="text/css" href="./day-2.css">
</head>
<body>
<!-- card -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="card">
<div class="poster">
<img class="poster-image" src="./poster.jpg" alt="Coringa">
</div>
<div class="details">
<h2 class="details-title">Coringa</h2>
<h3 class="details-subtitle">Dirigido por <span class="details-subtitle-hl">Todd Phillips</span></h3>
<div class="casting">
<h4 class="casting-title">Elenco</h4>
<ul class="casting-list">
<li class="casting-item">
<img
class="casting-image"
src="http://br.web.img3.acsta.net/c_162_216/pictures/18/07/26/19/03/0700120.jpg">
</li>
<li class="casting-item">
<img
class="casting-image"
src="http://br.web.img3.acsta.net/c_162_216/pictures/15/09/16/17/30/201281.jpg">
</li>
<li class="casting-item">
<img
class="casting-image"
src="http://br.web.img3.acsta.net/c_162_216/pictures/19/02/25/18/42/3297607.jpg">
</li>
<li class="casting-item">
<img
class="casting-image"
src="http://br.web.img3.acsta.net/c_162_216/medias/nmedia/18/92/87/44/20222686.jpg">
</li>
<li class="casting-item">
<img
class="casting-image"
src="http://br.web.img3.acsta.net/c_162_216/pictures/15/06/29/13/14/250948.jpg">
</li>
</ul>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Card */
.card {
border-radius: 4px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #000;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0,0,0, 0.5);
width: 300px;
height: 450px;
}

.card .poster { position: relative; overflow: hidden; }

.card .poster:before {
content: "";
position: absolute ;
bottom: -150px;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg,#000 50%, transparent);
transition: 0.5s;
z-index: 1;
}

.card .poster-image { width: 100%; transition: 0.5s; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Details */
.details {
position: absolute;
padding: 20px;
width: 100%;
height: 40%;
bottom: -110px;
left: 0;
box-sizing: border-box;
transition: 0.5s;
z-index: 2;
}

.details-title { color: #fff; font-size: 20px; }

.details-subtitle { font-size: 12px; color: #ff9800; }
.details-subtitle-hl { font-size: 14px; font-weight: 700; }
1
2
3
4
/* Card - Hover */
.card:hover .poster:before { bottom: 0; }
.card:hover .poster-image { filter: blur(2px); transform: translateY(-30px); }
.card:hover .details { bottom: 0; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Casting */
.casting { position: relative; margin-top: 15px; }
.casting-title { font-size: 20px; color: #f7f406; }
.casting-list { display: flex; margin: 10px 0 0; }
.casting-item {
list-style: none;
width: 45px;
height: 45px;
background: #fff;
border-radius: 50%;
overflow: hidden;
margin-right: 6px;
border: 2px solid #fff;
}
.casting-image { width: 100%; }

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.