Profile Card Com Efeito Degradê Blue

Neste tutorial vamos fazer um Profile Card Com Efeito Degradê Blue com html e css

Vamos adicionar o Html:

<figure class="card-blue">
            
            <div class="img-box"> <img src="uploads/profile1.jpg"> </div>
            
            <figcaption class="desc degradeBlue">
            
                <h4>Carla <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-pinterest-1"></i></a> </li>

                </ul>

            </figcaption>

        </figure><!--card Blue-->

        <figure class="card-blue">
            
            <div class="img-box"> <img src="uploads/profile2.jpg"> </div>
            
            <figcaption class="desc degradeBlue">
            
                <h4>Monica <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-youtube"></i></a> </li>

                </ul>

            </figcaption>

        </figure><!--card Blue-->

        <figure class="card-blue">
            
            <div class="img-box"> <img src="uploads/profile3.jpg"> </div>
            
            <figcaption class="desc degradeBlue">
            
                <h4>Luciana <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-linkedin"></i></a> </li>

                </ul>

            </figcaption>

        </figure><!--card Blue-->

Vamos adicionar o Css:

.card-blue   { 

	width:100%; 
	max-height:400px; 
	height:100%; 
	margin-bottom:30px; 
	float:left; 
	position:relative; 
	overflow:hidden; 
	border-radius:6px; 
	transition: .5s; 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); 

}

.card-blue .img-box { 

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

}

.card-blue .img-box img  { 

	width:100%; 
	transition:.5s; 
	-webkit-transform:scale(1.1); 
	transform:scale(1.1); 

}

.card-blue:hover .img-box img { 

	-webkit-transform:scale(1); 
	transform:scale(1); 

}

.card-blue .desc       { 

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

.card-blue .desc h4 { 

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

}

.card-blue .desc p { 

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

}

.card-blue .desc span { 

	letter-spacing:8px; 	
	font-family:'open_sansregular'; 

}

.card-blue .desc ul { 

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

}

.card-blue .desc ul li { 

	list-style:none; 
}

.card-blue .desc ul li { 

	margin-right:3px;  
}

.card-blue .desc ul li a { 

	color:#00c9d0;
	background-color:#ffffff;
	border-radius:50px;
	display:block; 
	width:35px;
	height:35px;     
	line-height:40px;  
	font-size:1em; 
	text-decoration:none;
	transition:.6s; 
 

}

.card-blue .desc ul li a:hover {

	background-color: #2f2f2f;
    color: #fff; 

}

.card-blue .desc.degradeBlue { 

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

}

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

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

}

Veja o Resultado !

Baixar Código Veja Funcionando