Card Css Efeito Hover Up

Card Css Efeito Hover Up

Neste tutorial vamos fazer um card com efeito hover Up com html e css.

vamos adicionar o html:

                <article class="card">
        
                    <div class="maskara"></div>
                    <div class="imgCapa">
                       
                        <img src="uploads/cafeteria.jpg">

                    </div><!--imgCapa-->

                        <div class="descricao">
                            <h3 class="icon icon-coffee-streamline"> Cafeteria</h3>
                            <p> cafetaria é um estabelecimento que partilha certas características com os bares... </p>
                            <a href="#" class="btn"> Veja mais</a>
                        </div><!--descrição-->
               
                </article><!--Card-->

                <article class="card">
        
                    <div class="maskara"></div>
                    <div class="imgCapa">
                       
                        <img src="uploads/restaurante.jpg">

                    </div><!--imgCapa-->

                        <div class="descricao">
                            <h3 class="icon icon-chef-food-restaurant-streamline"> Restaurante</h3>
                            <p>Um restaurante é um estabelecimento comercial destinado ao preparo e comércio de refeições...</p>
                            <a href="#" class="btn"> Veja mais</a>
                        </div><!--descrição-->
               
                </article><!--Card-->

                <article class="card">
        
                    <div class="maskara"></div>
                    <div class="imgCapa">
                       
                        <img src="uploads/lanchonete.jpg">

                    </div><!--imgCapa-->

                        <div class="descricao">
                            <h3 class="icon icon-eat-food-hotdog-streamline"> Lanchonete</h3>
                            <p>Lanchonete é um estabelecimento comercial popular especializado em pequenas refeições... </p>
                            <a href="#" class="btn"> Veja mais</a>
                        </div><!--descrição-->
               
                </article><!--Card-->

Vamos Adicionar o Css:

.card  { 

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

.card:hover { 

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

.card .imgCapa  { 
	position:relative; 
}

.card .imgCapa img  { 

	width:100%; 
	transition:.5s; 
}

.card:hover .imgCapa img { 

	transform: translateY(-10px); 
}

.card .maskara  { 

	position:absolute; 
	bottom:0; 
	left:0; 
	background:linear-gradient(0deg, rgba(0,0,0,0.8), transparent); 
	width:100%; 
	height:100%; 
	z-index:1; 
	transition: .5s; 
}

.card .descricao { 

	position:absolute; 
	bottom:0; 
	left:0; 
	padding:15px; 
	z-index:2; 

}

.card .descricao h3  { 

	width:100%; 
	float:left; 
	color:#fff; 
	font-size:1.2em; 
	margin-bottom:0.5em; 
	font-family:'open_sansbold';

}

.card .descricao p { 

	width:100%; 
	float:left; 
	color:#fff; 
	font-size:0.8em; 
	margin-bottom:0.5em; 
	font-family:'open_sansregular'; 

}

.card .descricao .btn { 

	float:left; 
	color:#fff; 
	background:#ff0062; 
	width:auto; 
	display:block; 
	text-decoration:none; 
	font-size:0.8em; 
	font-family:'open_sansregular';  
	padding:0.4em 0.6em; 
	border-radius:3px; 

}


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

.card                    { width:31.33%; margin-right:3%; margin-bottom:0; }
.card:nth-of-type(3n+0)  { margin-right:0; }

} 

Veja o Resultado !

Baixar Código Veja Funcionando