{"id":1169,"date":"2026-01-17T19:59:59","date_gmt":"2026-01-17T19:59:59","guid":{"rendered":"https:\/\/studioimmens.com\/effetti-hover-css-blocchi-gutenberg\/"},"modified":"2026-07-16T17:02:43","modified_gmt":"2026-07-16T15:02:43","slug":"effetti-hover-css-blocchi-gutenberg","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/effetti-hover-css-blocchi-gutenberg\/","title":{"rendered":"Come aggiungere effetti hover CSS ai blocchi Gutenberg"},"content":{"rendered":"<p>Gli effetti hover sono tra gli strumenti pi&ugrave; semplici e potenti per migliorare l&#8221;interattivit&agrave; percepita di un sito web. Un pulsante che cambia colore, una card che si solleva, un&#8221;immagine che si ingrandisce: sono piccoli dettagli che fanno la differenza nell&#8221;esperienza utente. In questa guida completa vediamo come creare effetti hover per i blocchi Gutenberg usando solo CSS, con esempi pratici e tecniche avanzate.<\/p>\n<h2>L&#8221;importanza degli effetti hover nell&#8221;UX<\/h2>\n<p>Gli effetti hover hanno un impatto fondamentale sull&#8221;esperienza utente:<\/p>\n<ul>\n<li><strong>Feedback visivo immediato:<\/strong> l&#8221;utente capisce che l&#8221;elemento &egrave; interattivo<\/li>\n<li><strong>Percezione di qualit&agrave;:<\/strong> un sito con effetti hover curati sembra pi&ugrave; professionale<\/li>\n<li><strong>Guidano l&#8221;utente:<\/strong> gli hover effect suggeriscono dove cliccare<\/li>\n<li><strong>Coinvolgimento:<\/strong> rendono l&#8221;esplorazione del sito pi&ugrave; divertente<\/li>\n<\/ul>\n<h2>I migliori effetti hover per Gutenberg<\/h2>\n<h3>1. Sollevamento (Lift)<\/h3>\n<p>L&#8221;effetto pi&ugrave; comune e apprezzato. La card o il pulsante si solleva leggermente al passaggio del mouse, creando un effetto 3D sottile.<\/p>\n<pre><code>.hover-lift {\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),\n                box-shadow 0.3s ease;\n}\n\n.hover-lift:hover {\n    transform: translateY(-6px);\n    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<h3>2. Bordo animato<\/h3>\n<p>Un bordo che si anima al passaggio del mouse. Puoi animare la posizione, la larghezza o il colore del bordo.<\/p>\n<pre><code>.hover-bordo {\n    position: relative;\n}\n\n.hover-bordo::after {\n    content: '';\n    position: absolute;\n    bottom: -2px;\n    left: 0;\n    width: 0;\n    height: 2px;\n    background: #00c7b1;\n    transition: width 0.3s ease;\n}\n\n.hover-bordo:hover::after {\n    width: 100%;\n}<\/code><\/pre>\n<h3>3. Ingrandimento immagine (Zoom)<\/h3>\n<p>Perfetto per gallerie, card prodotto e portfolio. L&#8221;immagine si ingrandisce leggermente all&#8221;hover.<\/p>\n<pre><code>.hover-zoom {\n    overflow: hidden;\n    border-radius: 12px;\n}\n\n.hover-zoom img {\n    transition: transform 0.4s ease;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.hover-zoom:hover img {\n    transform: scale(1.08);\n}<\/code><\/pre>\n<h3>4. Sfondo che si illumina<\/h3>\n<p>Un effetto elegante per card e sezioni: lo sfondo cambia gradualmente colore.<\/p>\n<pre><code>.hover-sfondo {\n    transition: background-color 0.3s ease, box-shadow 0.3s ease;\n    padding: 20px;\n    border-radius: 12px;\n}\n\n.hover-sfondo:hover {\n    background-color: #f0fdfa;\n    box-shadow: 0 4px 20px rgba(0, 199, 177, 0.08);\n}<\/code><\/pre>\n<h3>5. Sottolineatura animata per link<\/h3>\n<pre><code>.hover-link {\n    text-decoration: none;\n    position: relative;\n    display: inline-block;\n}\n\n.hover-link::after {\n    content: '';\n    position: absolute;\n    bottom: -2px;\n    left: 50%;\n    width: 0;\n    height: 2px;\n    background: #00c7b1;\n    transition: all 0.3s ease;\n    transform: translateX(-50%);\n}\n\n.hover-link:hover::after {\n    width: 100%;\n}<\/code><\/pre>\n<h3>6. Flip 3D card<\/h3>\n<p>Un effetto spettacolare per card che rivelano informazioni sul retro.<\/p>\n<pre><code>.hover-flip {\n    perspective: 1000px;\n}\n\n.hover-flip-inner {\n    position: relative;\n    transition: transform 0.6s;\n    transform-style: preserve-3d;\n}\n\n.hover-flip:hover .hover-flip-inner {\n    transform: rotateY(180deg);\n}\n\n.hover-flip-front, .hover-flip-back {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    backface-visibility: hidden;\n}\n\n.hover-flip-back {\n    transform: rotateY(180deg);\n}<\/code><\/pre>\n<h3>7. Rivelazione circolare<\/h3>\n<p>Un cerchio che si espande dal cursore rivelando il contenuto sottostante.<\/p>\n<pre><code>.hover-circle {\n    position: relative;\n    overflow: hidden;\n}\n\n.hover-circle::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 0;\n    height: 0;\n    background: rgba(0, 199, 177, 0.1);\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n    transition: width 0.6s ease, height 0.6s ease;\n}\n\n.hover-circle:hover::before {\n    width: 300%;\n    height: 300%;\n}<\/code><\/pre>\n<h3>8. Scurimento graduale<\/h3>\n<pre><code>.hover-darken {\n    position: relative;\n    overflow: hidden;\n}\n\n.hover-darken::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0);\n    transition: background 0.3s ease;\n}\n\n.hover-darken:hover::after {\n    background: rgba(0, 0, 0, 0.3);\n}\n\n\/* Testo che appare al centro *\/\n.hover-darken .testo-hover {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.8);\n    opacity: 0;\n    transition: all 0.3s ease;\n    z-index: 1;\n    color: white;\n}\n\n.hover-darken:hover .testo-hover {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}<\/code><\/pre>\n<h2>Best practice per gli effetti hover<\/h2>\n<ul>\n<li><strong>Usa transition su transform e opacity:<\/strong> sono le propriet&agrave; pi&ugrave; performanti<\/li>\n<li><strong>Durata ottimale:<\/strong> 0.2-0.4 secondi &egrave; il range ideale per la maggior parte degli effetti<\/li>\n<li><strong>Easing curve:<\/strong> cubic-bezier(0.34, 1.56, 0.64, 1) per un effetto &#8220;rimbalzino&#8221; naturale<\/li>\n<li><strong>Non esagerare:<\/strong> 2-3 tipi di hover ben fatti valgono pi&ugrave; di 10 effetti diversi<\/li>\n<li><strong>Mobile:<\/strong> ricorda che sui dispositivi touch non esiste hover. Gli effetti devono funzionare anche con tap<\/li>\n<\/ul>\n<h2>Applicare gli hover ai blocchi Gutenberg<\/h2>\n<p>Basta aggiungere le classi CSS sopra al tema, poi nei blocchi Gutenberg inserisci la classe desiderata nel campo &#8220;Classe CSS aggiuntiva&#8221;. Il blocco reagir&agrave; al passaggio del mouse.<\/p>\n<p>Con <a href=\"https:\/\/studioimmens.com\/en\/classyblocks-pro\/\">ClassyBlocks Pro<\/a> puoi applicare 12 effetti hover gi&agrave; pronti con un click direttamente nell&#8221;editor Gutenberg, con preview live e zero configurazioni CSS.<\/p>","protected":false},"excerpt":{"rendered":"<p>Gli effetti hover sono tra gli strumenti pi&ugrave; semplici e potenti per migliorare l&#8221;interattivit&agrave; percepita di un sito web. Un pulsante che cambia colore, una card che si solleva, un&#8221;immagine che si ingrandisce: sono piccoli dettagli che fanno la differenza nell&#8221;esperienza utente. In questa guida completa vediamo come creare effetti hover per i blocchi Gutenberg [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1234,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[21,40],"tags":[116,109,117,53],"ai_visibility":[],"class_list":["post-1169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-sviluppo-web","tag-animazioni-css","tag-gutenberg-css","tag-scroll-driven","tag-user-experience"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1169"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1169\/revisions"}],"predecessor-version":[{"id":1189,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1169\/revisions\/1189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1234"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1169"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}