ZoomIn Cards Com css

ZoomIn Cards Com css

Neste artigo vamos fazer um Card com efeito de ZoomIn quando passamos o mouse com html e Css.

Vamos Adicionar o Html:

<div class="box-cards">
        
        <div class="card">
          
          <h1 class="title">Html5</h1>
          <p>
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            <br><br> It has survived not only five centuries.
          </p>

          <a href="#" class="link" title="Veja mais"> <i class="icon icon-forward-1"></i> Veja mais</a>

        </div>
        
        <div class="card">

          <h1 class="title">Css3</h1>
          <p>
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            <br><br> It has survived not only five centuries.
          </p>
          
          <a href="#" class="link" title="Veja mais"> <i class="icon icon-forward-1"></i> Veja mais</a>

        </div>
        
        <div class="card">

          <h1 class="title">JQuery</h1>
          <p>
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            <br><br> It has survived not only five centuries.
          </p>

         <a href="#" class="link" title="Veja mais"> <i class="icon icon-forward-1"></i> Veja mais</a>

        </div>
        
        <div class="card">

          <h1 class="title">WordPress</h1>
          <p>
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            <br><br> It has survived not only five centuries.
          </p>

          <a href="#" class="link" title="Veja mais"> <i class="icon icon-forward-1"></i> Veja mais</a>

        </div>
    
    </div><!--Box Card-->

Vamos Adicionar o Css:

        .box-cards {

	  width:100%;
	  height:auto;
	  float:left;

	}

	.card .title {
	  
	  width:100%;
	  float:left;
	  color:#ffffff;   
	  font-size:0.9em;
	  text-align:justify;
	  margin-bottom:10px;
	  padding-bottom:10px; 
	  border-bottom:1px #6a6a6a solid;
	  transition:.6s;  

	}

	.card p {

	  width:100%;
	  float:left;  	
	  font-size:15px;
	  line-height:20px; 
	  text-align:center;
	  margin-bottom:5px;
	  transition:.6s;  
	 
	}

	.card:hover p { color:#2f2f2f; }

	.card .link {

	  color: #33dbdf;
	  font-size: 16px;
	  width: 100%;
	  float: left;
	  margin-bottom: 5px;
	  text-decoration:none;
	  transition:.6s; 

	}

	.card:hover .link { color:#2f2f2f; }

	.card {

	  width:100%;
	  height:auto;
	  display:inline-block;
	  padding:0.5em;
	  border-radius:6px;  
	  background-color:#4c4c4c;
	  font-family: 'open_sansregular';
	  font-size:30px;
	  text-align:center;
	  color: #ffffff;
	  -webkit-transform: scale(1,1);
	  -webkit-transition-timing-function: ease-out;
	  -webkit-transition-duration: 250ms;

	}

	.card:hover .title{

	   color:#2f2f2f; 
	   border-bottom:1px #2f2f2f solid;

	}

	.card:hover {
	    
	   background-color:#33dbdf; 
	  -webkit-transform: scale(1.05,1.07);
	  -webkit-transition-timing-function: ease-out;
	  -webkit-transition-duration: 220ms;
	  z-index:1;
          position: relative;

	}

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

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

	}

	/*960PX BREAKPOINT*/
	@media (min-width:60em){

	    .card { width:24.58%; margin-right:0; margin-bottom:0; }
	    .card p { line-height:25px; }
	    .card:nth-of-type(4n+0) { margin-right:0; }

	}

Veja o Resultado !

Baixar Código Veja Funcionando