Profile Card com Efeito Degradê Green

Profile Card com Efeito Degradê Green

Neste tutorial vamos criar um Profile Card com Efeito Degradê Green com Html e Css.

Vamos Adicionar o: Html

                <figure class="card-green">
                    
                    <div class="img-box"> <img src="uploads/profile1.jpg"> </div>
                    
                    <figcaption class="desc degradeGreen">
                    
                        <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 Green-->

                <figure class="card-green">
                    
                    <div class="img-box"> <img src="uploads/profile2.jpg"> </div>
                    
                    <figcaption class="desc degradeGreen">
                    
                        <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 Green-->

                <figure class="card-green">
                    
                    <div class="img-box"> <img src="uploads/profile3.jpg"> </div>
                    
                    <figcaption class="desc degradeGreen">
                    
                        <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 Green-->

Vamos Adicionar o: Css

.card-green   { 

	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 1px rgba(0, 0, 0, 0.15);

}

.card-green .img-box { 

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

}

.card-green .img-box img  { 

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

}

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

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

}

.card-green .desc       { 

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

.card-green .desc h4 { 

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

}

.card-green .desc p { 

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

}

.card-green .desc span { 

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

}

.card-green .desc ul { 

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

}

.card-green .desc ul li { 

	list-style:none; 
}

.card-green .desc ul li { 

}

.card-green .desc ul li a { 

    color: #fff;
    background-color: #0000002e;
	display: block;
	width: 33.3%;
	height: 60px;
	line-height: 65px;
	font-size: 1.3em;
	text-decoration: none;
	transition: .6s;
	float: left;
 

}

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

	background-color: #ffffff85;
	color: #3ea21a;

}

.card-green .desc.degradeGreen { 

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

}

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

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

}

Veja o Resultado!

Baixar Código Veja Funcionando