Glass Card Hover Effects with Red Scroll Glow<\/title>\n <style>\n \/* Centering styles *\/\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n \/* Container for cards *\/\n .card-container {\n display: flex; \/* Align cards in a row *\/\n gap: 20px; \/* Space between cards *\/\n padding: 20px;\n flex-wrap: wrap; \/* Allow wrapping for responsiveness *\/\n justify-content: center; \/* Center cards horizontally *\/\n }\n\n \/* Glass Card Styles *\/\n .glassBox, .glassBox * {\n box-sizing: border-box;\n transition: 400ms;\n }\n\n .glassBox {\n width: 100%;\n height: 400px;\n max-width: 300px;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(2px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-right-color: rgba(255, 255, 255, 0.1);\n border-bottom-color: rgba(255, 255, 255, 0.1);\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);\n padding: 15px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-decoration: none; \/* Remove default underline from links *\/\n color: inherit; \/* Ensure text color is inherited *\/\n transition: box-shadow 400ms, transform 400ms;\n }\n\n .glassBox__imgBox img {\n display: block;\n width: 100%;\n height: auto;\n transition: transform 400ms;\n }\n\n .glassBox__title {\n text-align: center;\n margin-top: 15px;\n color: #FFF;\n font-size: 20px;\n font-weight: 400;\n font-family: \"Lato\";\n }\n\n .glassBox__content {\n position: absolute;\n right: 15px;\n bottom: 15px;\n left: 15px;\n text-align: center;\n color: #FFF;\n font-size: 14px;\n font-family: \"Lato\";\n letter-spacing: .1em;\n opacity: 0;\n transition: opacity 400ms;\n }\n\n .glassBox:hover .glassBox__imgBox {\n transform: translateY(-50px);\n }\n\n .glassBox:hover .glassBox__imgBox img {\n transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);\n }\n\n .glassBox:hover .glassBox__content {\n opacity: 1;\n }\n\n \/* Red Glow effect *\/\n .glow {\n box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; \/* Red glow *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card-container\">\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.M.J.HOW<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.L.S.CHANY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.HARIZ<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.MARLEY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cards = document.querySelectorAll('.glassBox');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('glow');\n } else {\n entry.target.classList.remove('glow');\n }\n });\n }, {\n threshold: 0.5 \/\/ Adjust this value based on when you want the effect to trigger\n });\n\n cards.forEach(card => {\n observer.observe(card);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2199466862\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2199466862\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-22b7189 e-con-full e-flex e-con e-child\" data-id=\"22b7189\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c53a696 elementor-widget elementor-widget-html\" data-id=\"c53a696\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Glass Card Hover Effects with Red Scroll Glow<\/title>\n <style>\n \/* Centering styles *\/\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n \/* Container for cards *\/\n .card-container {\n display: flex; \/* Align cards in a row *\/\n gap: 20px; \/* Space between cards *\/\n padding: 20px;\n flex-wrap: wrap; \/* Allow wrapping for responsiveness *\/\n justify-content: center; \/* Center cards horizontally *\/\n }\n\n \/* Glass Card Styles *\/\n .glassBox, .glassBox * {\n box-sizing: border-box;\n transition: 400ms;\n }\n\n .glassBox {\n width: 100%;\n height: 400px;\n max-width: 300px;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(2px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-right-color: rgba(255, 255, 255, 0.1);\n border-bottom-color: rgba(255, 255, 255, 0.1);\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);\n padding: 15px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-decoration: none; \/* Remove default underline from links *\/\n color: inherit; \/* Ensure text color is inherited *\/\n transition: box-shadow 400ms, transform 400ms;\n }\n\n .glassBox__imgBox img {\n display: block;\n width: 100%;\n height: auto;\n transition: transform 400ms;\n }\n\n .glassBox__title {\n text-align: center;\n margin-top: 15px;\n color: #FFF;\n font-size: 20px;\n font-weight: 400;\n font-family: \"Lato\";\n }\n\n .glassBox__content {\n position: absolute;\n right: 15px;\n bottom: 15px;\n left: 15px;\n text-align: center;\n color: #FFF;\n font-size: 14px;\n font-family: \"Lato\";\n letter-spacing: .1em;\n opacity: 0;\n transition: opacity 400ms;\n }\n\n .glassBox:hover .glassBox__imgBox {\n transform: translateY(-50px);\n }\n\n .glassBox:hover .glassBox__imgBox img {\n transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);\n }\n\n .glassBox:hover .glassBox__content {\n opacity: 1;\n }\n\n \/* Red Glow effect *\/\n .glow {\n box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; \/* Red glow *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card-container\">\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.M.J.HOW<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.L.S.CHANY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.HARIZ<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.MARLEY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cards = document.querySelectorAll('.glassBox');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('glow');\n } else {\n entry.target.classList.remove('glow');\n }\n });\n }, {\n threshold: 0.5 \/\/ Adjust this value based on when you want the effect to trigger\n });\n\n cards.forEach(card => {\n observer.observe(card);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2199466863\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2199466863\" data-tab-index=\"3\" style=\"--n-tabs-title-order: 3;\" class=\" elementor-element elementor-element-9231181 e-con-full e-flex e-con e-child\" data-id=\"9231181\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ef856e elementor-widget elementor-widget-html\" data-id=\"3ef856e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Glass Card Hover Effects with Red Scroll Glow<\/title>\n <style>\n \/* Centering styles *\/\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n \/* Container for cards *\/\n .card-container {\n display: flex; \/* Align cards in a row *\/\n gap: 20px; \/* Space between cards *\/\n padding: 20px;\n flex-wrap: wrap; \/* Allow wrapping for responsiveness *\/\n justify-content: center; \/* Center cards horizontally *\/\n }\n\n \/* Glass Card Styles *\/\n .glassBox, .glassBox * {\n box-sizing: border-box;\n transition: 400ms;\n }\n\n .glassBox {\n width: 100%;\n height: 400px;\n max-width: 300px;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(2px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-right-color: rgba(255, 255, 255, 0.1);\n border-bottom-color: rgba(255, 255, 255, 0.1);\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);\n padding: 15px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-decoration: none; \/* Remove default underline from links *\/\n color: inherit; \/* Ensure text color is inherited *\/\n transition: box-shadow 400ms, transform 400ms;\n }\n\n .glassBox__imgBox img {\n display: block;\n width: 100%;\n height: auto;\n transition: transform 400ms;\n }\n\n .glassBox__title {\n text-align: center;\n margin-top: 15px;\n color: #FFF;\n font-size: 20px;\n font-weight: 400;\n font-family: \"Lato\";\n }\n\n .glassBox__content {\n position: absolute;\n right: 15px;\n bottom: 15px;\n left: 15px;\n text-align: center;\n color: #FFF;\n font-size: 14px;\n font-family: \"Lato\";\n letter-spacing: .1em;\n opacity: 0;\n transition: opacity 400ms;\n }\n\n .glassBox:hover .glassBox__imgBox {\n transform: translateY(-50px);\n }\n\n .glassBox:hover .glassBox__imgBox img {\n transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);\n }\n\n .glassBox:hover .glassBox__content {\n opacity: 1;\n }\n\n \/* Red Glow effect *\/\n .glow {\n box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; \/* Red glow *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card-container\">\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.M.J.HOW<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.L.S.CHANY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.HARIZ<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.MARLEY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cards = document.querySelectorAll('.glassBox');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('glow');\n } else {\n entry.target.classList.remove('glow');\n }\n });\n }, {\n threshold: 0.5 \/\/ Adjust this value based on when you want the effect to trigger\n });\n\n cards.forEach(card => {\n observer.observe(card);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Choose your preferred location Glenmarie Kota Damansara Puchong Glass Card Hover Effects with Red Scroll Glow GM.M.J.HOW Glenmarie GM.L.S.CHANY Glenmarie GM.HARIZ Glenmarie GM.MARLEY Glenmarie Glass Card Hover Effects with Red Scroll Glow GM.M.J.HOW Kota Damansara GM.L.S.CHANY Kota Damansara GM.HARIZ Kota Damansara GM.MARLEY Kota Damansara Glass Card Hover Effects with Red Scroll Glow GM.M.J.HOW Glenmarie GM.L.S.CHANY […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-159","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=159"}],"version-history":[{"count":39,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages\/159\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages\/159\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\n\n\n \n \n Glass Card Hover Effects with Red Scroll Glow<\/title>\n <style>\n \/* Centering styles *\/\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n \/* Container for cards *\/\n .card-container {\n display: flex; \/* Align cards in a row *\/\n gap: 20px; \/* Space between cards *\/\n padding: 20px;\n flex-wrap: wrap; \/* Allow wrapping for responsiveness *\/\n justify-content: center; \/* Center cards horizontally *\/\n }\n\n \/* Glass Card Styles *\/\n .glassBox, .glassBox * {\n box-sizing: border-box;\n transition: 400ms;\n }\n\n .glassBox {\n width: 100%;\n height: 400px;\n max-width: 300px;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(2px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-right-color: rgba(255, 255, 255, 0.1);\n border-bottom-color: rgba(255, 255, 255, 0.1);\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);\n padding: 15px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-decoration: none; \/* Remove default underline from links *\/\n color: inherit; \/* Ensure text color is inherited *\/\n transition: box-shadow 400ms, transform 400ms;\n }\n\n .glassBox__imgBox img {\n display: block;\n width: 100%;\n height: auto;\n transition: transform 400ms;\n }\n\n .glassBox__title {\n text-align: center;\n margin-top: 15px;\n color: #FFF;\n font-size: 20px;\n font-weight: 400;\n font-family: \"Lato\";\n }\n\n .glassBox__content {\n position: absolute;\n right: 15px;\n bottom: 15px;\n left: 15px;\n text-align: center;\n color: #FFF;\n font-size: 14px;\n font-family: \"Lato\";\n letter-spacing: .1em;\n opacity: 0;\n transition: opacity 400ms;\n }\n\n .glassBox:hover .glassBox__imgBox {\n transform: translateY(-50px);\n }\n\n .glassBox:hover .glassBox__imgBox img {\n transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);\n }\n\n .glassBox:hover .glassBox__content {\n opacity: 1;\n }\n\n \/* Red Glow effect *\/\n .glow {\n box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; \/* Red glow *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card-container\">\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.M.J.HOW<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.L.S.CHANY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.HARIZ<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.MARLEY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cards = document.querySelectorAll('.glassBox');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('glow');\n } else {\n entry.target.classList.remove('glow');\n }\n });\n }, {\n threshold: 0.5 \/\/ Adjust this value based on when you want the effect to trigger\n });\n\n cards.forEach(card => {\n observer.observe(card);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2199466862\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2199466862\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-22b7189 e-con-full e-flex e-con e-child\" data-id=\"22b7189\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c53a696 elementor-widget elementor-widget-html\" data-id=\"c53a696\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Glass Card Hover Effects with Red Scroll Glow<\/title>\n <style>\n \/* Centering styles *\/\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n \/* Container for cards *\/\n .card-container {\n display: flex; \/* Align cards in a row *\/\n gap: 20px; \/* Space between cards *\/\n padding: 20px;\n flex-wrap: wrap; \/* Allow wrapping for responsiveness *\/\n justify-content: center; \/* Center cards horizontally *\/\n }\n\n \/* Glass Card Styles *\/\n .glassBox, .glassBox * {\n box-sizing: border-box;\n transition: 400ms;\n }\n\n .glassBox {\n width: 100%;\n height: 400px;\n max-width: 300px;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(2px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-right-color: rgba(255, 255, 255, 0.1);\n border-bottom-color: rgba(255, 255, 255, 0.1);\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);\n padding: 15px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-decoration: none; \/* Remove default underline from links *\/\n color: inherit; \/* Ensure text color is inherited *\/\n transition: box-shadow 400ms, transform 400ms;\n }\n\n .glassBox__imgBox img {\n display: block;\n width: 100%;\n height: auto;\n transition: transform 400ms;\n }\n\n .glassBox__title {\n text-align: center;\n margin-top: 15px;\n color: #FFF;\n font-size: 20px;\n font-weight: 400;\n font-family: \"Lato\";\n }\n\n .glassBox__content {\n position: absolute;\n right: 15px;\n bottom: 15px;\n left: 15px;\n text-align: center;\n color: #FFF;\n font-size: 14px;\n font-family: \"Lato\";\n letter-spacing: .1em;\n opacity: 0;\n transition: opacity 400ms;\n }\n\n .glassBox:hover .glassBox__imgBox {\n transform: translateY(-50px);\n }\n\n .glassBox:hover .glassBox__imgBox img {\n transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);\n }\n\n .glassBox:hover .glassBox__content {\n opacity: 1;\n }\n\n \/* Red Glow effect *\/\n .glow {\n box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; \/* Red glow *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card-container\">\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.M.J.HOW<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.L.S.CHANY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.HARIZ<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.MARLEY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Kota Damansara<\/div>\n <\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cards = document.querySelectorAll('.glassBox');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('glow');\n } else {\n entry.target.classList.remove('glow');\n }\n });\n }, {\n threshold: 0.5 \/\/ Adjust this value based on when you want the effect to trigger\n });\n\n cards.forEach(card => {\n observer.observe(card);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2199466863\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2199466863\" data-tab-index=\"3\" style=\"--n-tabs-title-order: 3;\" class=\" elementor-element elementor-element-9231181 e-con-full e-flex e-con e-child\" data-id=\"9231181\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ef856e elementor-widget elementor-widget-html\" data-id=\"3ef856e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Glass Card Hover Effects with Red Scroll Glow<\/title>\n <style>\n \/* Centering styles *\/\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n \/* Container for cards *\/\n .card-container {\n display: flex; \/* Align cards in a row *\/\n gap: 20px; \/* Space between cards *\/\n padding: 20px;\n flex-wrap: wrap; \/* Allow wrapping for responsiveness *\/\n justify-content: center; \/* Center cards horizontally *\/\n }\n\n \/* Glass Card Styles *\/\n .glassBox, .glassBox * {\n box-sizing: border-box;\n transition: 400ms;\n }\n\n .glassBox {\n width: 100%;\n height: 400px;\n max-width: 300px;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(2px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-right-color: rgba(255, 255, 255, 0.1);\n border-bottom-color: rgba(255, 255, 255, 0.1);\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);\n padding: 15px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-decoration: none; \/* Remove default underline from links *\/\n color: inherit; \/* Ensure text color is inherited *\/\n transition: box-shadow 400ms, transform 400ms;\n }\n\n .glassBox__imgBox img {\n display: block;\n width: 100%;\n height: auto;\n transition: transform 400ms;\n }\n\n .glassBox__title {\n text-align: center;\n margin-top: 15px;\n color: #FFF;\n font-size: 20px;\n font-weight: 400;\n font-family: \"Lato\";\n }\n\n .glassBox__content {\n position: absolute;\n right: 15px;\n bottom: 15px;\n left: 15px;\n text-align: center;\n color: #FFF;\n font-size: 14px;\n font-family: \"Lato\";\n letter-spacing: .1em;\n opacity: 0;\n transition: opacity 400ms;\n }\n\n .glassBox:hover .glassBox__imgBox {\n transform: translateY(-50px);\n }\n\n .glassBox:hover .glassBox__imgBox img {\n transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);\n }\n\n .glassBox:hover .glassBox__content {\n opacity: 1;\n }\n\n \/* Red Glow effect *\/\n .glow {\n box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; \/* Red glow *\/\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card-container\">\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.M.J.HOW<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.L.S.CHANY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.HARIZ<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n\n \n <a href=\"https:\/\/example.com\" class=\"glassBox\">\n <div class=\"glassBox__imgBox\">\n <img decoding=\"async\" src=\"https:\/\/vagtechnik.com.my\/wp-content\/uploads\/2024\/09\/vag_profile.png\" alt=\"GM.MARLEY\">\n <h3 class=\"glassBox__title\">GM.MARLEY<\/h3>\n <\/div>\n <div class=\"glassBox__content\">Glenmarie<\/div>\n <\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cards = document.querySelectorAll('.glassBox');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('glow');\n } else {\n entry.target.classList.remove('glow');\n }\n });\n }, {\n threshold: 0.5 \/\/ Adjust this value based on when you want the effect to trigger\n });\n\n cards.forEach(card => {\n observer.observe(card);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Choose your preferred location Glenmarie Kota Damansara Puchong Glass Card Hover Effects with Red Scroll Glow GM.M.J.HOW Glenmarie GM.L.S.CHANY Glenmarie GM.HARIZ Glenmarie GM.MARLEY Glenmarie Glass Card Hover Effects with Red Scroll Glow GM.M.J.HOW Kota Damansara GM.L.S.CHANY Kota Damansara GM.HARIZ Kota Damansara GM.MARLEY Kota Damansara Glass Card Hover Effects with Red Scroll Glow GM.M.J.HOW Glenmarie GM.L.S.CHANY […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-159","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=159"}],"version-history":[{"count":39,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages\/159\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=\/wp\/v2\/pages\/159\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/vagtechnik.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}