Profile Card – Com Efeito Dêgrade Black
PRÓXIMO
Loading Css – Animação X Y
ANTERIOR
Botão Css – Borda Externa FadeOut
Postado: 4 de março de 2022
Tempo de Leitura: 2 Minutos
Profile Card – Com Efeito Dêgrade Black
Neste tutorial vamos fazer um profile card com Html e css
Vamos adicionar o Html:
<figure class="card-black"> <div class="img-box"> <img src="uploads/profile1.jpg"> </div> <figcaption class="desc degradeBlack"> <h4>Alice <br><span>Cullen</span></h4> <p>The Twilight Saga é uma série de cinco filmes, dos gêneros fantasia e romance, lançados entre ...</p> <a href="https://pt.wikipedia.org/wiki/The_Twilight_Saga" target="_blank" class="veja">Veja mais...</a> <ul> <li> <a href="#"><i class="icon icon-facebook"></i></a> </li> <li> <a href="#"><i class="icon icon-instagram"></i></a> </li> <li> <a href="#"><i class="icon icon-pinterest-1"></i></a> </li> </ul> </figcaption> </figure><!--card Black--> <figure class="card-black"> <div class="img-box"> <img src="uploads/profile2.jpg"> </div> <figcaption class="desc degradeBlack"> <h4> Isabella <br><span>Cullen</span></h4> <p>The Twilight Saga é uma série de cinco filmes, dos gêneros fantasia e romance, lançados entre ...</p> <a href="https://pt.wikipedia.org/wiki/The_Twilight_Saga" target="_blank" class="veja">Veja mais...</a> <ul> <li> <a href="#"><i class="icon icon-facebook"></i></a> </li> <li> <a href="#"><i class="icon icon-instagram"></i></a> </li> <li> <a href="#"><i class="icon icon-youtube"></i></a> </li> </ul> </figcaption> </figure><!--card Black--> <figure class="card-black"> <div class="img-box"> <img src="uploads/profile3.jpg"> </div> <figcaption class="desc degradeBlack"> <h4>Esme <br><span>Cullen</span></h4> <p>The Twilight Saga é uma série de cinco filmes, dos gêneros fantasia e romance, lançados entre ...</p> <a href="https://pt.wikipedia.org/wiki/The_Twilight_Saga" target="_blank" class="veja">Veja mais...</a> <ul> <li> <a href="#"><i class="icon icon-facebook"></i></a> </li> <li> <a href="#"><i class="icon icon-instagram"></i></a> </li> <li> <a href="#"><i class="icon icon-linkedin"></i></a> </li> </ul> </figcaption> </figure><!--card Black-->
Vamos adicionar o Css:
.card-black { width:100%; max-height:400px; height:100%; margin-bottom:30px; float:left; position:relative; overflow:hidden; border-radius:3px; transition: .5s; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); } .card-black .img-box { position:relative; left:0; bottom:0; width:100%; height:100%; transition: .5s; } .card-black .img-box img { width:100%; transition:.5s; -webkit-transform:scale(1); transform:scale(1); } .card-black:hover { background-color:#a61515; } .card-black:hover .img-box img { -webkit-transform:scale(1.1); transform:scale(1.1); opacity:0.6; } .card-black .desc { position:absolute; width:100%; height:auto; bottom:0; transition:.5s; padding:20px; text-align:center; z-index:1; } .card-black .desc h4 { width:100%; font-size:1.2em; color:#fff; font-family:'open_sansbold'; margin-bottom:5px; } .card-black .desc p { width:100%; font-size:0.8em; color:#fff; font-family:'open_sansregular'; } .card-black .desc .veja { width:100%; font-size:1em; color:#ce0202; text-decoration:none; font-family:'open_sansregular'; transition:.5s; } .card-black .desc .veja:hover { color:#ffffff; text-decoration:underline; } .card-black .desc ul { display: flex; margin: 20px 0 0; padding:0; align-items:center; justify-content:center; } .card-black .desc ul li { list-style:none; } .card-black .desc ul li { margin-right:7px; } .card-black .desc ul li a { color:#ffffff; background-color:#ce0202; border-radius:3px; display:block; width:35px; height:35px; line-height:40px; font-size:1em; text-decoration:none; transition:.6s; } .card-black .desc ul li a:hover { background-color: #ffffff; color: #ce0202; } .card-black .desc.degradeBlack { background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent); } /*768PX BREAKPOINT*/ @media (min-width:48em){ .card-black { width:31.33%; max-height:430px; margin-right:3%; } .card-black:nth-of-type(3n+0) { margin-right:0; } }
Veja o Resultado !
Deixe um comentário