Profile Card – Com Efeito Dêgrade Black

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 !

Baixar Código Veja Funcionando