TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

11 effetti in bilico dell’immagine CSS per Weebly

14

Nel nostro articolo precedente abbiamo visto come creare sovrapposizioni di immagini al passaggio del mouse e in questo articolo esamineremo come creare semplici effetti di passaggio dell’immagine per il tuo sito Weebly. Le proprietà CSS di transizione, trasformazione, filtraggio e opacità vengono utilizzate per creare effetti di hovering per le immagini sul sito Weebly. Puoi copiare/incollare il codice completo del widget all’interno dell’elemento "Embed Code" o aggiungere lo stile CSS nella sezione "Header Code" e il codice HTML all’interno dell’elemento " Embed Code " sulla pagina.

Effetti in bilico dell’immagine CSS per Weebly

Ci sono 11 diversi effetti da controllare: zoom indietro, zoom avanti, ingrandire, ridurre, saturare, contrasto, luminosità, scala di grigi, sfocatura, invertire i colori e l’opacità. Il codice CSS e HTML completo insieme alla demo per ogni stile è mostrato di seguito.

  • Assicurati di sostituire l’URL immagine con il tuo URL immagine. Puoi caricare immagini nella sezione "Risorse" o utilizzare URL da pagine diverse sul tuo sito Weebly o utilizzare URL da altri siti.
  • È possibile modificare i valori di scala, scala di grigi, luminosità, contrasto, ecc. con i propri valori. Ad esempio, "-webkit-filter: luminosità(0.25);" ridurrà la luminosità al 25% che è possibile modificare in "-webkit-filter:luminosità (1.25);" per aumentare la luminosità al 125%.
  • La proprietà del filtro non è supportata in Internet Explorer.

Ecco un codice completo per ogni tipo di effetto hovering dell’immagine. Puoi visualizzare l’anteprima passando il mouse sull’immagine.

1 Ingrandisci l’immagine al passaggio del mouse

<style> .cont1 { overflow:hidden; } .cont1:hover .image1 { -webkit-transform:scale(1); transform:scale(1); } .image1 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont1"> <img class="image1" src="Image-URL"> </div>

2 Rimpicciolisci l’immagine al passaggio del mouse

<style> .cont2 { overflow:hidden; } .cont2:hover .image2 { -webkit-transform:scale(1); transform:scale(1); } .image2 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont2"> <img class="image2" src="Image-URL"> </div>

3 Ingrandisci le dimensioni dell’immagine al passaggio del mouse

<style> .image3 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image3:hover { -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <img class="image3" src="Image-URL">

4 Riduci dimensione immagine al passaggio del mouse

<style> .image4 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image4:hover { -webkit-transform:scale(0.7); transform:scale(0.7); } </style> <img class="image4" src="Image-URL">

5 Modificare la saturazione dei colori dell’immagine al passaggio del mouse

<style> .image5 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image5:hover { -webkit-filter: saturate(4); } </style> <img class="image5" src="Image-URL">

6 Converti immagine in scala di grigi al passaggio del mouse

<style> .image6 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image6:hover { -webkit-filter: grayscale(100%); } </style> <img class="image6" src="Image-URL">

7 Modifica del contrasto al passaggio del mouse sull’immagine

<style> .image7 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image7:hover { -webkit-filter: contrast(160%); } </style> <img class="image7" src="Image-URL">

8 Modifica della luminosità al passaggio del mouse sull’immagine

<style> .image8 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image8:hover { -webkit-filter: brightness(0.25); } </style> <img class="image8" src="Image-URL">

9 Cambia sfocatura dell’immagine al passaggio del mouse

<style> .image9 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image9:hover { -webkit-filter: blur(5px); } </style> <img class="image9" src="Image-URL">

10 Inverti i colori dell’immagine al passaggio del mouse

<style> .image10 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image10:hover { -webkit-filter: invert(100%); } </style> <img class="image10" src="Image-URL">

11 Cambia i colori di opacità al passaggio del mouse

<style> .image11 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image11:hover { opacity:0.6; filter: alpha(opacity=60); } </style> <img class="image11" src="Image-URL">

Poiché tutti questi effetti sono creati con CSS generici, puoi utilizzare questi codici su qualsiasi pagina HTML. Ad esempio, questo è un sito WordPress e abbiamo utilizzato il blocco " HTML personalizzato " in WordPress per mostrare tutti gli effetti di sovrapposizione delle immagini CSS.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More