Portfólio Html Css

Neste tutorial vamos fazer um Modulo para listar Portfólio com Html e Css Responsivo.

Vamos Adicionar o Html:

        <div class="portfolio">
            <div class="portfolio_hover"></div>
            <h1 class="title">Css3</h1>
            <a href="#" class="link" title="Saiba mais">Códigos Css</a>
            <img src="uploads/css.jpg">
        </div>

        <div class="portfolio">
            <div class="portfolio_hover"></div>
            <h1 class="title">jQuery</h1>
            <a href="#" class="link" title="Saiba mais">Efeitos com jQuery</a>
            <img src="uploads/jquery.jpg">
        </div>

        <div class="portfolio">
            <div class="portfolio_hover"></div>
            <h1 class="title">Html5</h1>
            <a href="#" class="link" title="Saiba mais">Códigos Html</a>
            <img src="uploads/html.jpg">
        </div>

        <div class="portfolio">
            <div class="portfolio_hover"></div>
            <h1 class="title">jQuery</h1>
            <a href="#" class="link" title="Saiba mais">Efeitos com jQuery</a>
            <img src="uploads/jquery.jpg">
        </div>

        <div class="portfolio">
            <div class="portfolio_hover"></div>
            <h1 class="title">Html5</h1>
            <a href="#" class="link" title="Saiba mais">Códigos Html</a>
            <img src="uploads/html.jpg">
        </div>

        <div class="portfolio">
            <div class="portfolio_hover"></div>
            <h1 class="title">Css3</h1>
            <a href="#" class="link" title="Saiba mais">Códigos Css</a>
            <img src="uploads/css.jpg">
        </div>

Vamos Adicionar o Css:

.portfolio { 

		width:100%; 
		height:100%; 
		background:#CCC;   
		float:left;
		margin-bottom:20px;  
		position:relative; 
		overflow:hidden;
		border-radius:6px; 
	}

	.portfolio img { width:100%; height:100%; border-radius:6px; }

	.portfolio .portfolio_hover { 

		z-index:2; 
		width:100%; 
		height:100%; 
		position:absolute; 
		top:-100%; 
		left:0; 
		background: rgba(0, 0, 0, 0.90);
		border-radius:6px;  
		transition:all 500ms; 
		-moz-transition:all 500ms; 
		-ms-transition:all 500ms; 
		-o-transition:all 500ms; 
		-webkit-transition:all 500ms;
	}

	.portfolio:hover .portfolio_hover { top:0;}
	.portfolio:hover .title { left:0;}
	.portfolio:hover .link  { left:0;}
	.portfolio img          { top:0; left:0; z-index:1;}

	.title { 

		font-family: Helvetica, sans-serif; 
		position:absolute; 
		top:35%; 
		left:100%; 
		z-index:3; 
		color:#fff; 
		text-align:center; 
		width:100%; 
		font-size:25px;

	}

	.link { 

		font-family: Helvetica, sans-serif; 
		position:absolute; 
		top:55%; 
		left:-100%; 
		z-index:3; 
		color:#0adbdf; 
		text-align:center; 
		width:100%; 
		font-size:16px;
		text-decoration:none; 

	}

	.title,.link, .portfolio_hover{

		transition:all 500ms; 
		-moz-transition:all 500ms; 
		-ms-transition:all 500ms; 
		-o-transition:all 500ms; 
		-webkit-transition:all 500ms;

	}

	/*RESPONSIVO*/
	/*768PX BREAKPOINT*/

	@media (min-width:48em){

	    .portfolio {  width:32%; margin-right:2%; }
	    .portfolio:nth-of-type(3n+0) {  margin-right:0; }


	}

Veja o Resultado!

Baixar Código Veja Funcionando