Profile Card Com Efeito Degradê Red

Profile Card Com Efeito Degradê Red

Neste tutorial veja como fazer um profile card com css e Html.

Vamos Adicionar o Html:

                <figure class="card-red">
                    
                    <div class="img-box"> <img src="uploads/profile1.jpg"> </div>
                    
                    <figcaption class="desc degradeRed">
                    
                        <h4>Aurora Lopes <br><span>Designer</span></h4>
                        <p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em ...</p>

                        <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-twitter"></i></a> </li>

                        </ul>

                    </figcaption>

                </figure><!--card Red-->

                <figure class="card-red">
                    
                    <div class="img-box"> <img src="uploads/profile2.jpg"> </div>
                    
                    <figcaption class="desc degradeRed">
                    
                        <h4>Amara Felix <br><span>Developer</span></h4>
                        <p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em ...</p>

                        <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-twitter"></i></a> </li>

                        </ul>

                    </figcaption>

                </figure><!--card Red-->

                <figure class="card-red">
                    
                    <div class="img-box"> <img src="uploads/profile3.jpg"> </div>
                    
                    <figcaption class="desc degradeRed">
                    
                        <h4>Sarah Parker <br><span>Front-end</span></h4>
                        <p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em ...</p>

                        <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-twitter"></i></a> </li>

                        </ul>

                    </figcaption>

                </figure><!--card Red-->

Vamos Adicionar o Css:

.card-red   { 

	width:100%; 
	max-height:400px; 
	height:100%; 
	margin-bottom:30px; 
	float:left; 
	position:relative; 
	overflow:hidden; 
	border-radius:6px; 
	transition: .5s; 
}

.card-red:hover { 

	transform: translateY(-10px); 
	box-shadow: 0 6px 8px rgba(0,0,0,0.5); 

}

.card-red .img-box { 

	position:relative; 
	left:0; 
	bottom:0; 
	width:100%; 
	height:100%; 
	transition: .5s; 

}

.card-red .img-box img  { width:100%; transition: .5s; }

.card-red:hover .img-box img { transform: translateY(-10px); }

.card-red .desc       { 

	position:absolute; 
	width:100%; 
	height:auto; 
	bottom:0; 
	transition:.5s; 
	padding:20px; 
	text-align:center; 
	z-index:1; 
}

.card-red .desc h4 { 

	width:100%; 
	font-size:1.2em; 
	color:#fff; 
	font-family:'open_sansbold';  

}

.card-red .desc p { 

	width:100%; 
	font-size:0.8em; 
	color:#fff; 
	font-family:'open_sansregular';

}

.card-red .desc ul { 

	display: flex; 
	margin: 20px 0 0; 
	padding:0; 
	align-items:center; 
	justify-content:center; 

}

.card-red .desc ul li { 

	list-style:none; 
}

.card-red .desc ul li a { 

	color:#fff; 
	padding:0 10px; 
	font-size:1em; 
	text-decoration:none; 

}

.card-red .desc.degradeRed { 

	background:linear-gradient(0deg, rgba(194,24,51,0.9), transparent); 

}

/*768PX BREAKPOINT*/
@media (min-width:48em){

.card-red { width:31.33%; max-height:430px; margin-right:3%; }
.card-red:nth-of-type(3n+0)  { margin-right:0; }

} 

Veja o Resultado !

Baixar Código Veja Funcionando