Portfolio con CSS3

Portfolio sperimentale In questo articolo ho riprodotto con i css3 un effetto jquery di un portfolio che ho trovato pochi […]
Portfolio con CSS3

Portfolio sperimentale

In questo articolo ho riprodotto con i css3 un effetto jquery di un portfolio che ho trovato pochi giorni fa online. Attualmente è compatibile solo per firefox, quindi testalo con questo browser. Ecco cosa ho sperimentato:

Codice HTML

<div id="wrapper">
    <div class="content_1">
        <span>
            <div class="info">
                <p><strong>Work 1</strong><br />
               		progettato nel 2008<br />
                	<i>xhtml + css</i>
                </p>
            </div>
            <img src="work_1.jpg" alt="cliente 1" />
        </span>
    </div>
</div>

Scomponiamo il codice

Il mio scopo è stato quello di ottenere un insieme di immagini affiancate, dove al passaggio del mouse compare un box colorato con delle informazioni. Il codice sopra riportato è composto da:

  • div wrapper – per racchiudere tutte le foto.
  • div content_1 – contenitore della singola foto.
  • span – secondo contenitore della foto, essenziale per l’animazione.
  • div info – contenitore delle informazioni del lavoro.
  • img – thumbnail del lavoro.

Codice CSS

#wrapper{width:410px; margin:50px auto; position:relative;}
.content_1{width:200px; height:200px; float:left; position:relative; z-index:2; margin:0 10px 10px 0}
.info{width:200px; height:200px; position:absolute; top:0px; left:0px;}
img{display:block;}
.content_1 .info{background:#1897b8;}

span{ 
transition:all 0.4s ease-out;
	
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
    
position:relative;
z-index:1;
}

span:hover{
transform:translate(200px, 0px);
transition:all 0.5s ease;

-moz-transform:translate(200px, 0px); -webkit-transform:translate(200px, 0px); -o-transform:translate(200px, 0px); -ms-transform:translate(200px, 0px);

-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease;
}

Scomponiamo il CSS

  • La prima parte del codice css crea un gioco di sovrapposizioni tra i vari elementi html (wrapper, content_1, info ed img).
  • Il tag span, a rollover viene spostato (con la proprietà translate) di 200px trascinando con se il box delle info, perchè settato in posizione assoluta.
  • Il tempo e la modalità di movimento sono dati dalla proprietà transition, nel mio caso ho impostato 0.5 secondi per compiere l’animazione più il valore ease per un movimento “dolce”.

Provalo subito

Prova la demo Consulta il codice
  • Peccato per il “bug” quando il mouse è :hover al testo in grassetto del div info.

    😉

    • Sorry, avevo dimenticato di eliminare gli span anche per gli altri esempi. Grazie per la segnalazione 🙂

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github