Effetto animato per un articolo in ecommerce

In questo tutorial vediamo un altro effetto animato che si verifica al passaggio del mouse sopra una immagine.
Questo effetto e molto semplice ma nello stesso tempo potrebbe avere tantissimi utilizzi come per esempio  per presentare un articolo nella categoria di articoli un in negozio online.

Effetto animato al passagio del mouse per un articolo in un negozio online

Di solito vogliamo mostrare piu articoli nello stesso tempo e con questo effetto posiamo nascondere quello che a primo contatto visivo non e importante come per esempio una breve descrizione del articolo in vendita e solo al momento che visitatore a deciso di scoprire di piu sul articolo che li e piaciuto e avvicina il puntatore del suo mouse appare questa breve descrizione e non solo.
Posiamo mostrare un bottone per visualizzazione veloce del articolo senza passare alla sua pagina o qualche altra  icone . Quindi con questo effetto posiamo evitare di ingombrare la nostra pagina di articoli di informazioni al primo momento non tanto importanti.

Okay a questo punto vediamo prima in vivo come appare nostro effetto e puoi vediamo come realizzarlo

Passa con il puntatore del mouse sopra vestito

Piccolo vestito nero

Piccolo vestito nero

22 Euro
al carrello

Materiale: poliestere e spandex, Mesh

4 colori: nero, rosso, blu, giallo

Ad alta qualità, molto elegante e affasciante, casual, adatto per party, cocktail, ecc

Piccolo vestito nero

Piccolo vestito nero

al carrello 22 Euro

Materiale: poliestere e spandex, Mesh

4 colori: nero, rosso, blu, giallo

Ad alta qualità, molto elegante e affasciante, casual, adatto per party, cocktail, ecc

Come base per la nostra lezione di oggi ho preso la scheda del prodotto da un altro articolo, avevo aggiunto una breve descrizione e l 'avevo nascosta al inizio con la proprietà display:none. E al momento del passaggio del mouse ho prescritto display:block.

In oltre per il contenitore del articolo ho prescritto position:relative per puoi aplicare al blocco nascosto position:absolute  e ho indicato la sua posizione in valori precisi.

Cosi non spingerà l'articolo che si trova sotto verso bassa ma lo ricopre semplicemente al hover. Ho aggiunto anche ombra esterna per evidenziare al meglio la scheda completa. Quindi riporto qua sotto solo il codice aggiuntivo css rispetto articolo citato sopra e markup finale per un singolo articolo

Markup html

<div class="product-item">
         <img src="http://ioeweb.it/images/virtuemart/black-dress.jpg" alt="Piccolo vestito nero">
         <div class="product-list"><h3>Piccolo vestito nero</h3>
          <div class="info">
               <a href="/" class="button">al carrello </a><span class="price">22 Euro</span>
              <p>Materialeggg: poliestere e spandex, Mesh </p>
              <p>4 colori: nero, rosso, blu, giallo </p>
              <p>Ad alta qualità, molto elegante e affasciante, casual, adatto per party, cocktail, ecc </p>
            </div>      
       </div>
</div>

 

Stili CSS

.product-item .info {
 width: 300px;
 display: none;
 background: #fff;
 font-size: 1.2em;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
.product-item .info p {
font-size:12px;
line-height 11px;
text-align:left;}
.product-item:hover .info {
position:absolute;
display: block;
padding:10px;
z-index:20;
box-shadow: 0px 5px 5px 0px grey;
}

 

Letto 373 volte