{"id":591,"date":"2026-09-23T06:20:09","date_gmt":"2026-09-23T06:20:09","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?page_id=591"},"modified":"2026-10-11T06:47:54","modified_gmt":"2026-10-11T06:47:54","slug":"hover-box","status":"publish","type":"page","link":"https:\/\/shapekode.com\/product\/shapeblock\/hover-box\/","title":{"rendered":"Hover Box"},"content":{"rendered":"<style id=\"shapeblock-block-css-5-inline-css\">\n.shapeblock-layout-row-mum3s8 { justify-content:center;align-content:stretch;flex-wrap:wrap;gap:20px;padding-top:120px;padding-right:16px;padding-bottom:120px;padding-left:16px;background-color:#5933ff;background-image:url(https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/banner-shape.webp);background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:scroll;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-mum3s8 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-elv1eg { flex:0 1 calc(800px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(800px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-elv1eg > .shapeblock-column__inner { display:flex;flex-direction:column;align-items:center; }.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading { text-align:center; }\n.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading .shapeblock-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-1-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#00000000;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-2-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#ffffff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button:hover { color:#ffffff;border-style:solid;border-color:#0067ff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-3-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-4-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-5-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-mum3s8 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-elv1eg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h1 style=\"margin-bottom:8px\" class=\"has-link-color wp-elements-1 wp-block-post-title has-text-color has-base-color has-xx-large-font-size has-text-align-center\">Hover Box<\/h1> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-130a5c wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h4 class=\"shapeblock-title\">Build your Hover Box Block With ShapeBlock<\/h4>\t<\/div> <\/div> <p class=\"has-text-align-center has-base-color has-text-color has-link-color wp-elements-2 wp-block-paragraph\" style=\"margin-top:20px\">The Gutenberg Hover Box Widget helps you showcase important features, services, or information with engaging hover effects, attractive layouts, and flexible customization options, making your website more interactive, visually appealing, and easy to explore.<\/p> <div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-211891db wp-block-group-is-layout-flex\" style=\"padding-top:14px\"> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-5240d5 wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-primary\" target=\"_self\"> <span class=\"shapeblock-button-text\">Get Started Now<\/span> <\/a> <\/div> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-31oq4y wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-outline\" target=\"_blank\" rel=\"noopener\"> <span class=\"shapeblock-button-text\">Documentation  <\/span> <\/a> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-17-inline-css\">\n.shapeblock-layout-row-kljciw { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-kljciw { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-kljciw { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-kljciw > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-kljciw > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ala9gd { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-6-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-a7vbuw { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-a7vbuw > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-kr2xm0 { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-kr2xm0 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-kr2xm0 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-kr2xm0 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-kr2xm0 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-kr2xm0 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-kr2xm0 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-l7mpw4 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-l7mpw4 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-l7mpw4 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-l7mpw4 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-l7mpw4 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-l7mpw4 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-l7mpw4 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-7-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-8-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2q0o11 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2q0o11 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2q0o11 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-2q0o11 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2q0o11 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2q0o11 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2q0o11 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-9-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-10-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mw7bxm .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mw7bxm .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mw7bxm .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-mw7bxm .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mw7bxm .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mw7bxm .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mw7bxm .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-11-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-12-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-ejkcrp .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-ejkcrp .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-ejkcrp .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-ejkcrp .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-ejkcrp .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-ejkcrp .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-ejkcrp .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-13-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-14-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-15-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-16-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-17-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-kljciw is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ala9gd wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\">Fade Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 01<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-a7vbuw wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-kr2xm0 is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ajyzwe wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-l7mpw4 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-fade shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-l24ji7 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-2q0o11 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-fade shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-yg296e wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-mw7bxm shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-fade shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-5x1n8p wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-ejkcrp shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-fade shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-3-2.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-29-inline-css\">\n.shapeblock-layout-row-jx6efd { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;background-color:#f6f6f6;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-jx6efd { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-jx6efd { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-jx6efd > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-jx6efd > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-pqif42 { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-18-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-o80z4n { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-o80z4n > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-ucilht { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-ucilht { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-ucilht { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-ucilht > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-ucilht > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-ucilht > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-ucilht > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t528k1 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t528k1 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t528k1 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-t528k1 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t528k1 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t528k1 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t528k1 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-19-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-20-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sggvdx .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sggvdx .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sggvdx .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-sggvdx .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sggvdx .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sggvdx .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sggvdx .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-21-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-22-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bedp1x .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bedp1x .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bedp1x .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-bedp1x .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bedp1x .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bedp1x .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bedp1x .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-23-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-24-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j9md65 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j9md65 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j9md65 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-j9md65 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j9md65 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j9md65 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j9md65 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-25-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-26-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-27-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-28-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-29-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-jx6efd is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-pqif42 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Slide Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 02<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-o80z4n wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-ucilht is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-1yuud2 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Slide from Top<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-t528k1 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-slide shapeblock-hover-box-align-center shapeblock-hover-box-dir-top wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-owwydp wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Slide from Bottom<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-sggvdx shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-slide shapeblock-hover-box-align-center shapeblock-hover-box-dir-bottom wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-tvbz70 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Slide from Left<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-bedp1x shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-slide shapeblock-hover-box-align-center shapeblock-hover-box-dir-left wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ykh593 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Slide from Right<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-j9md65 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-slide shapeblock-hover-box-align-center shapeblock-hover-box-dir-right wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-3-2.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-41-inline-css\">\n.shapeblock-layout-row-dafg23 { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-dafg23 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-dafg23 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-dafg23 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-dafg23 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ylp1n0 { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-30-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-vzrvih { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-vzrvih > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-ldzpuh { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-ldzpuh { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-ldzpuh { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-ldzpuh > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-ldzpuh > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-ldzpuh > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-ldzpuh > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clbst3 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clbst3 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clbst3 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-clbst3 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clbst3 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clbst3 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clbst3 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-31-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-32-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-zix8tz .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-zix8tz .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-zix8tz .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-zix8tz .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-zix8tz .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-zix8tz .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-zix8tz .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-33-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-34-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kocgjf .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kocgjf .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kocgjf .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-kocgjf .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kocgjf .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kocgjf .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kocgjf .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-35-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-36-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5uktai .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5uktai .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5uktai .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-5uktai .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5uktai .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5uktai .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5uktai .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-37-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-38-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-39-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-40-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-41-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-dafg23 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ylp1n0 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Push Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 03<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-vzrvih wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-ldzpuh is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-q3puxe wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Push from Top<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-clbst3 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-push shapeblock-hover-box-align-center shapeblock-hover-box-dir-top wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-lg1y5g wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Push from Bottom<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-zix8tz shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-push shapeblock-hover-box-align-center shapeblock-hover-box-dir-bottom wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-2mvnys wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Push from Left<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-kocgjf shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-push shapeblock-hover-box-align-center shapeblock-hover-box-dir-left wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-exxb0r wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Push from Right<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-5uktai shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-push shapeblock-hover-box-align-center shapeblock-hover-box-dir-right wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-3-2.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-53-inline-css\">\n.shapeblock-layout-row-f29vch { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;background-color:#f6f6f6;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-f29vch { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-f29vch { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-f29vch > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-f29vch > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-t4jtz6 { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-42-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-d04a6c { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-d04a6c > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-mlg1sr { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-mlg1sr { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-mlg1sr { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-mlg1sr > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-mlg1sr > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-mlg1sr > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-mlg1sr > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-y7x6hh .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-y7x6hh .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-y7x6hh .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-y7x6hh .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-y7x6hh .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-y7x6hh .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-y7x6hh .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-43-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-44-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fbmqof .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fbmqof .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fbmqof .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-fbmqof .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fbmqof .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fbmqof .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fbmqof .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-45-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-46-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1jrwrz .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1jrwrz .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1jrwrz .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-1jrwrz .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1jrwrz .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1jrwrz .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1jrwrz .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-47-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-48-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bimge3 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bimge3 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bimge3 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-bimge3 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bimge3 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bimge3 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-bimge3 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-49-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-50-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-51-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-52-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-53-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-f29vch is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-t4jtz6 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Hinge Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 04<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-d04a6c wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-mlg1sr is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-lq0hnz wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Hinge from Top<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-y7x6hh shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-hinge shapeblock-hover-box-align-center shapeblock-hover-box-dir-top wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ow7gd2 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Hinge from Bottom<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-fbmqof shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-hinge shapeblock-hover-box-align-center shapeblock-hover-box-dir-bottom wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-m71kb3 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Hinge from Left<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-1jrwrz shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-hinge shapeblock-hover-box-align-center shapeblock-hover-box-dir-left wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-bizo8p wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Hinge from Right<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-bimge3 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-hinge shapeblock-hover-box-align-center shapeblock-hover-box-dir-right wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-3-2.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-65-inline-css\">\n.shapeblock-layout-row-nelw2u { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-nelw2u { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-nelw2u { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-nelw2u > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-nelw2u > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-82k4nm { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-54-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-yjklcw { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-yjklcw > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-pna444 { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-pna444 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-pna444 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-pna444 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pna444 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pna444 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pna444 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7av7ba .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7av7ba .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7av7ba .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-7av7ba .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7av7ba .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7av7ba .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7av7ba .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-55-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-56-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kqqth2 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kqqth2 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kqqth2 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-kqqth2 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kqqth2 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kqqth2 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-kqqth2 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-57-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-58-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-cnj1rs .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-cnj1rs .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-cnj1rs .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-cnj1rs .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-cnj1rs .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-cnj1rs .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-cnj1rs .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-59-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-60-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-oq881w .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-oq881w .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-oq881w .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-oq881w .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-oq881w .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-oq881w .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-oq881w .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-61-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-62-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-63-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-64-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-65-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-nelw2u is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-82k4nm wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Shutter Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 05<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-yjklcw wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-pna444 is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-nw76e0 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Shutter from Top<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-7av7ba shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-shutter shapeblock-hover-box-align-center shapeblock-hover-box-dir-top wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-uyf5j8 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Shutter from Bottom<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-kqqth2 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-shutter shapeblock-hover-box-align-center shapeblock-hover-box-dir-top wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-q3fvhj wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Shutter from Left<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-cnj1rs shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-shutter shapeblock-hover-box-align-center shapeblock-hover-box-dir-left wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-fklfz2 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Shutter  from Right<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-oq881w shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-shutter shapeblock-hover-box-align-center shapeblock-hover-box-dir-right wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-3-2.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-77-inline-css\">\n.shapeblock-layout-row-j849av { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;background-color:#f6f6f6;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-j849av { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-j849av { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-j849av > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-j849av > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-e6g5fe { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-66-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ox9bmw { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-ox9bmw > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-uyx2ub { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-uyx2ub { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-uyx2ub { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-uyx2ub > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-uyx2ub > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-uyx2ub > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-uyx2ub > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-f1iiuj .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-f1iiuj .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-f1iiuj .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-f1iiuj .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-f1iiuj .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-f1iiuj .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-f1iiuj .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-67-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-68-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sb51a3 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sb51a3 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sb51a3 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-sb51a3 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sb51a3 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sb51a3 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-sb51a3 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-69-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-70-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j72i7m .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j72i7m .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j72i7m .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-j72i7m .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j72i7m .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j72i7m .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-j72i7m .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-71-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-72-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-lbiln9 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-lbiln9 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-lbiln9 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-lbiln9 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-lbiln9 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-lbiln9 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-lbiln9 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-73-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-74-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-75-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-76-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-77-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-j849av is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-e6g5fe wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Zoom Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 06<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ox9bmw wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-uyx2ub is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-q8awy4 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Zoom UP with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-f1iiuj shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-zoom shapeblock-hover-box-align-center shapeblock-hover-box-dir-up wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-6yyd4l wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Zoom Down with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-sb51a3 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-zoom shapeblock-hover-box-align-center shapeblock-hover-box-dir-down wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-uevdrs wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Zoom UP with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-j72i7m shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-zoom shapeblock-hover-box-align-center shapeblock-hover-box-dir-up wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-59wq6q wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Zoom Down with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-lbiln9 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-zoom shapeblock-hover-box-align-center shapeblock-hover-box-dir-down wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-3-2.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-89-inline-css\">\n.shapeblock-layout-row-zv833j { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-zv833j { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-zv833j { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-zv833j > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-zv833j > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-mhxn3q { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-78-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-2d1hu6 { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-2d1hu6 > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-qjqxid { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-qjqxid { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-qjqxid { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-qjqxid > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-qjqxid > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-qjqxid > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-qjqxid > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1028a4 .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1028a4 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1028a4 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-1028a4 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1028a4 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1028a4 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1028a4 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-79-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-80-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7wxhdo .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7wxhdo .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7wxhdo .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-7wxhdo .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7wxhdo .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7wxhdo .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-7wxhdo .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-81-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-82-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-3w0pzn .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-3w0pzn .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-3w0pzn .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-3w0pzn .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-3w0pzn .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-3w0pzn .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-3w0pzn .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-83-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-84-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-za79bs .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-za79bs .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-za79bs .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-za79bs .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-za79bs .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-za79bs .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-za79bs .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-85-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-86-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-87-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-88-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-89-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-zv833j is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-mhxn3q wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Flip Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 07<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-2d1hu6 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-qjqxid is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-em1ogm wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Horizontal with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-1028a4 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-flip shapeblock-hover-box-align-center shapeblock-hover-box-dir-horizontal wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-movqfq wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Vertical with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-7wxhdo shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-flip shapeblock-hover-box-align-center shapeblock-hover-box-dir-vertical wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-b4gzuo wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Horizontal with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-3w0pzn shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-flip shapeblock-hover-box-align-center shapeblock-hover-box-dir-horizontal wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-eesgdg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Vertical with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-za79bs shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-flip shapeblock-hover-box-align-center shapeblock-hover-box-dir-vertical wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-3-2.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-101-inline-css\">\n.shapeblock-layout-row-yyh476 { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;background-color:#f6f6f6;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-yyh476 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-yyh476 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-yyh476 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-yyh476 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ydch0z { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-90-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ihok0n { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-ihok0n > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-7c2hvc { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-7c2hvc { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-7c2hvc { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-7c2hvc > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-7c2hvc > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-7c2hvc > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-7c2hvc > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m0s7ym .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m0s7ym .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m0s7ym .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-m0s7ym .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m0s7ym .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m0s7ym .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m0s7ym .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-91-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-92-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-z3uaxi .shapeblock-hover-box { width:240px;height:240px;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-z3uaxi .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-z3uaxi .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-z3uaxi .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-z3uaxi .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-z3uaxi .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-z3uaxi .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-93-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-94-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fo7hfo .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fo7hfo .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fo7hfo .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-fo7hfo .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fo7hfo .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fo7hfo .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-fo7hfo .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-95-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-96-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-aq9ylp .shapeblock-hover-box { width:240px;height:240px;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-aq9ylp .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-aq9ylp .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-aq9ylp .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-aq9ylp .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-aq9ylp .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-aq9ylp .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-97-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-98-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-99-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-100-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-101-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-yyh476 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ydch0z wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Spin Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 08<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ihok0n wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-7c2hvc is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-yzlvoo wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Spin with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-m0s7ym shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-spin shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-lk4s6f wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Spin with Icon Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-z3uaxi shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-spin shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-5y2zfm wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Spin with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-fo7hfo shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-spin shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-5.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-m4yp2z wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Spin with Icon Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-aq9ylp shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-spin shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-113-inline-css\">\n.shapeblock-layout-row-9ao7r0 { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-9ao7r0 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-9ao7r0 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-9ao7r0 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-9ao7r0 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-e2fdja { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-102-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-hkqkxf { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-hkqkxf > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-an6i3a { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-an6i3a { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-an6i3a { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-an6i3a > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-an6i3a > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-an6i3a > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-an6i3a > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-po27et .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-po27et .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-po27et .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-po27et .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-po27et .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-po27et .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-po27et .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-103-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-104-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5qkwhg .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5qkwhg .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5qkwhg .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-5qkwhg .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5qkwhg .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5qkwhg .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-5qkwhg .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-105-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-106-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-p9b0yl .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-p9b0yl .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-p9b0yl .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-p9b0yl .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-p9b0yl .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-p9b0yl .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-p9b0yl .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-107-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-108-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mpu04t .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mpu04t .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mpu04t .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-mpu04t .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mpu04t .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mpu04t .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-mpu04t .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-109-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-110-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-111-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-112-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-113-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-9ao7r0 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-e2fdja wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Blur Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 09<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hkqkxf wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-an6i3a is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-fykbq0 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Blur with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-po27et shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-blur shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-bn2bys wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Blur with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-5qkwhg shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-blur shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-c57bkl wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Blur with Icon Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-p9b0yl shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-blur shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-s47w6l wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Blur with Icon Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-mpu04t shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-blur shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-125-inline-css\">\n.shapeblock-layout-row-15uvpr { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;background-color:#f6f6f6;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-15uvpr { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-15uvpr { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-15uvpr > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-15uvpr > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-7mtymx { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-114-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-5fkns0 { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-5fkns0 > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-259lyf { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-259lyf { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-259lyf { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-259lyf > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-259lyf > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-259lyf > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-259lyf > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-35koyx .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-35koyx .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-35koyx .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-35koyx .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-35koyx .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-35koyx .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-35koyx .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-115-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-116-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1lrkde .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1lrkde .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1lrkde .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-1lrkde .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1lrkde .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1lrkde .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-1lrkde .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-117-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-118-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2i06yu .shapeblock-hover-box { width:240px;height:240px;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2i06yu .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2i06yu .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-2i06yu .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2i06yu .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2i06yu .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-2i06yu .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-119-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-120-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t6s231 .shapeblock-hover-box { width:240px;height:240px;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t6s231 .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t6s231 .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-t6s231 .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t6s231 .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t6s231 .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-t6s231 .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-121-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-122-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-123-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-124-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-125-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-15uvpr is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-7mtymx wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Circle Open Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 10<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-5fkns0 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-259lyf is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-eoheu7 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Circle Open with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-35koyx shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-circle shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-tgrw2k wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Circle Open with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-1lrkde shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-circle shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-wjpiwm wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Circle Open with Icon Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-2i06yu shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-circle shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-h735nd wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Circle Open with Icon Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-t6s231 shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-circle shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-137-inline-css\">\n.shapeblock-layout-row-ijwxw1 { justify-content:center;flex-wrap:wrap;gap:26px;padding-top:100px;padding-bottom:100px;--bp-gap:26px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-ijwxw1 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-ijwxw1 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-ijwxw1 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-ijwxw1 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-errtjf { flex:0 1 calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(500px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-126-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-71tym5 { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-71tym5 > .shapeblock-column__inner { display:flex;flex-direction:row; }.shapeblock-layout-row-vk3vta { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-vk3vta { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-vk3vta { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-vk3vta > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-vk3vta > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-vk3vta > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-vk3vta > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-hover-box-block-wrap.shapeblock-hover-box-52fnlb .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-52fnlb .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-52fnlb .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-52fnlb .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-52fnlb .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-52fnlb .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-52fnlb .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-127-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-128-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clq3tx .shapeblock-hover-box { width:240px;height:240px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clq3tx .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clq3tx .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-clq3tx .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clq3tx .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clq3tx .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-clq3tx .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-129-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-130-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-i1tunq .shapeblock-hover-box { width:240px;height:240px;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-i1tunq .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-i1tunq .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-i1tunq .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-i1tunq .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-i1tunq .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-i1tunq .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-131-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-132-inline-css *\/\n\n\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m470eq .shapeblock-hover-box { width:240px;height:240px;border-style:solid;border-color:#5933ff;border-width:1px 1px 1px 1px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m470eq .shapeblock-hover-box-overlay { background:rgba(89, 51, 255, 0.85); }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m470eq .shapeblock-hover-box-media, .shapeblock-hover-box-block-wrap.shapeblock-hover-box-m470eq .shapeblock-hover-box-overlay { transition-duration:450ms; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m470eq .shapeblock-hover-box-media i { font-size:48px; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m470eq .shapeblock-hover-box-title { color:#ffffff; }\n.shapeblock-hover-box-block-wrap.shapeblock-hover-box-m470eq .shapeblock-hover-box-desc { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-133-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-134-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-135-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-136-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-137-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-ijwxw1 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-errtjf wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <p class=\"has-text-align-center wp-block-paragraph\" style=\"margin-top:0px;margin-bottom:0px\">Curtain Effect<\/p> <h2 class=\"wp-block-heading has-text-align-center\">Hover Box Style 11<\/h2> <hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40)\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-71tym5 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-vk3vta is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-wwdn3u wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Curtain with Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-52fnlb shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-curtain shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-4.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-urtza8 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Curtain with Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-clq3tx shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-curtain shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <img src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/s-6.webp\" alt=\"\" class=\"shapeblock-hover-box-img\" loading=\"lazy\" decoding=\"async\">\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-z8qroi wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Curtain with Icon Circle<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-i1tunq shapeblock-hover-box-wrapper shapeblock-hover-box-shape-circle shapeblock-hover-box-effect-curtain shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-270v6o wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h4 class=\"wp-block-heading has-text-align-center\">Curtain with Icon Square<\/h4> <div class=\"shapeblock-block shapeblock-hover-box-block-wrap shapeblock-hover-box-m470eq shapeblock-hover-box-wrapper shapeblock-hover-box-shape-square shapeblock-hover-box-effect-curtain shapeblock-hover-box-align-center wp-block-shapeblock-hover-box\"> <div class=\"shapeblock-hover-box\"> <div class=\"shapeblock-hover-box-media\"> <i class=\"shapeblock-icon shapeblock-icon-favorite\" aria-hidden=\"true\"><\/i>\t\t<\/div> <div class=\"shapeblock-hover-box-overlay\"> <h3 class=\"shapeblock-hover-box-title\">Hover over me<\/h3>\t\t\t\t\t\t\t\t\t\t<p class=\"shapeblock-hover-box-desc\">A short line that appears when the pointer is over the box.<\/p> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-width","meta":{"_blockode_hide_title":true,"footnotes":""},"class_list":["post-591","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":31,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/591\/revisions"}],"predecessor-version":[{"id":1474,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/591\/revisions\/1474"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}