.elementor-2081 .elementor-element.elementor-element-f802e51{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-2081 .elementor-element.elementor-element-f802e51.e-con{--align-self:flex-start;--order:-99999 /* order start hack */;}.elementor-2081 .elementor-element.elementor-element-c2c62a9{--display:flex;}.elementor-2081 .elementor-element.elementor-element-03e4e25{width:var( --container-widget-width, 100% );max-width:100%;margin:4em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;}.elementor-2081 .elementor-element.elementor-element-03e4e25.elementor-element{--align-self:center;}.elementor-2081 .elementor-element.elementor-element-03e4e25.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-03e4e25 .elementor-heading-title{font-size:3em;font-weight:800;}.elementor-2081 .elementor-element.elementor-element-78f8748{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-2081 .elementor-element.elementor-element-78f8748.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-78f8748 .elementor-heading-title{font-size:2em;}.elementor-2081 .elementor-element.elementor-element-2a3f37c.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-d3f9d44{--display:flex;}.elementor-2081 .elementor-element.elementor-element-d55a010.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-800b6ea{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-2081 .elementor-element.elementor-element-800b6ea.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2081 .elementor-element.elementor-element-87445a7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2081 .elementor-element.elementor-element-5875c85{--display:flex;--justify-content:flex-start;--overlay-opacity:0.2;}.elementor-2081 .elementor-element.elementor-element-5875c85:hover::before, .elementor-2081 .elementor-element.elementor-element-5875c85:hover > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-5875c85:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-5875c85 > .elementor-background-slideshow:hover::before, .elementor-2081 .elementor-element.elementor-element-5875c85 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#000000;--background-overlay:'';}.elementor-2081 .elementor-element.elementor-element-5875c85::before, .elementor-2081 .elementor-element.elementor-element-5875c85 > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-5875c85 > .e-con-inner > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-5875c85 > .elementor-background-slideshow::before, .elementor-2081 .elementor-element.elementor-element-5875c85 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2081 .elementor-element.elementor-element-5875c85 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-2081 .elementor-element.elementor-element-5875c85:hover{--overlay-opacity:0.23;}.elementor-2081 .elementor-element.elementor-element-5875c85, .elementor-2081 .elementor-element.elementor-element-5875c85::before{--overlay-transition:0.2s;}.elementor-2081 .elementor-element.elementor-element-d87e41f .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-2081 .elementor-element.elementor-element-d87e41f.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-d87e41f{--e-off-canvas-justify-content:center;--e-off-canvas-align-items:center;--e-off-canvas-width:60%;--e-off-canvas-height:60vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-animation-duration:0.5s;--e-off-canvas-overlay-opacity:1;}.elementor-2081 .elementor-element.elementor-element-6b5e2ef{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2081 .elementor-element.elementor-element-2aef1c3{--display:flex;}.elementor-2081 .elementor-element.elementor-element-4b56994{width:var( --container-widget-width, 100.673% );max-width:100.673%;--container-widget-width:100.673%;--container-widget-flex-grow:0;}.elementor-2081 .elementor-element.elementor-element-4b56994.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2081 .elementor-element.elementor-element-4b56994.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-4b56994 .xpro-compare-overlay .xpro-compare-before-label{top:50%;transform:translateY(-50%);}.elementor-2081 .elementor-element.elementor-element-4b56994 .xpro-compare-overlay .xpro-compare-after-label{top:50%;transform:translateY(-50%);}.elementor-2081 .elementor-element.elementor-element-f34e3a4{--display:flex;}.elementor-2081 .elementor-element.elementor-element-dfb64b7.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-e996758.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-b253ab2.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-c63bcc2{z-index:5;}.elementor-2081 .elementor-element.elementor-element-c63bcc2.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-b10040f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2081 .elementor-element.elementor-element-843d0f8{--display:flex;--justify-content:flex-start;--overlay-opacity:0.2;}.elementor-2081 .elementor-element.elementor-element-843d0f8:hover::before, .elementor-2081 .elementor-element.elementor-element-843d0f8:hover > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-843d0f8:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-843d0f8 > .elementor-background-slideshow:hover::before, .elementor-2081 .elementor-element.elementor-element-843d0f8 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#000000;--background-overlay:'';}.elementor-2081 .elementor-element.elementor-element-843d0f8::before, .elementor-2081 .elementor-element.elementor-element-843d0f8 > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-843d0f8 > .e-con-inner > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-843d0f8 > .elementor-background-slideshow::before, .elementor-2081 .elementor-element.elementor-element-843d0f8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2081 .elementor-element.elementor-element-843d0f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-2081 .elementor-element.elementor-element-843d0f8:hover{--overlay-opacity:0.23;}.elementor-2081 .elementor-element.elementor-element-843d0f8, .elementor-2081 .elementor-element.elementor-element-843d0f8::before{--overlay-transition:0.2s;}.elementor-2081 .elementor-element.elementor-element-52d25a3 .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-2081 .elementor-element.elementor-element-52d25a3.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-52d25a3{--e-off-canvas-justify-content:center;--e-off-canvas-align-items:center;--e-off-canvas-width:60%;--e-off-canvas-height:60vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-animation-duration:0.5s;--e-off-canvas-overlay-opacity:1;}.elementor-2081 .elementor-element.elementor-element-80b05dd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2081 .elementor-element.elementor-element-0f8e935{--display:flex;}.elementor-2081 .elementor-element.elementor-element-83bae7e{width:var( --container-widget-width, 100.673% );max-width:100.673%;--container-widget-width:100.673%;--container-widget-flex-grow:0;}.elementor-2081 .elementor-element.elementor-element-83bae7e.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2081 .elementor-element.elementor-element-83bae7e.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-83bae7e .xpro-compare-overlay .xpro-compare-before-label{top:50%;transform:translateY(-50%);}.elementor-2081 .elementor-element.elementor-element-83bae7e .xpro-compare-overlay .xpro-compare-after-label{top:50%;transform:translateY(-50%);}.elementor-2081 .elementor-element.elementor-element-bf1ec9f{--display:flex;}.elementor-2081 .elementor-element.elementor-element-4319287.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-81771bb.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-056fe48.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-ac11a1f{z-index:5;}.elementor-2081 .elementor-element.elementor-element-ac11a1f.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-efce99e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2081 .elementor-element.elementor-element-2aabc2e{--display:flex;--justify-content:flex-start;--overlay-opacity:0.2;}.elementor-2081 .elementor-element.elementor-element-2aabc2e:hover::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e:hover > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e > .elementor-background-slideshow:hover::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:#000000;--background-overlay:'';}.elementor-2081 .elementor-element.elementor-element-2aabc2e::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e > .e-con-inner > .elementor-background-video-container::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e > .elementor-background-slideshow::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e > .e-con-inner > .elementor-background-slideshow::before, .elementor-2081 .elementor-element.elementor-element-2aabc2e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-2081 .elementor-element.elementor-element-2aabc2e:hover{--overlay-opacity:0.23;}.elementor-2081 .elementor-element.elementor-element-2aabc2e, .elementor-2081 .elementor-element.elementor-element-2aabc2e::before{--overlay-transition:0.2s;}.elementor-2081 .elementor-element.elementor-element-2eb913a .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-2081 .elementor-element.elementor-element-2eb913a.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-2eb913a{--e-off-canvas-justify-content:center;--e-off-canvas-align-items:center;--e-off-canvas-width:60%;--e-off-canvas-height:60vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-animation-duration:0.5s;--e-off-canvas-overlay-opacity:1;}.elementor-2081 .elementor-element.elementor-element-71fba14{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2081 .elementor-element.elementor-element-4ac6a64{--display:flex;}.elementor-2081 .elementor-element.elementor-element-7f5e37c{width:var( --container-widget-width, 100.673% );max-width:100.673%;--container-widget-width:100.673%;--container-widget-flex-grow:0;}.elementor-2081 .elementor-element.elementor-element-7f5e37c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2081 .elementor-element.elementor-element-7f5e37c.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-7f5e37c .xpro-compare-overlay .xpro-compare-before-label{top:50%;transform:translateY(-50%);}.elementor-2081 .elementor-element.elementor-element-7f5e37c .xpro-compare-overlay .xpro-compare-after-label{top:50%;transform:translateY(-50%);}.elementor-2081 .elementor-element.elementor-element-149240c{--display:flex;}.elementor-2081 .elementor-element.elementor-element-b773557.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-0eceea1.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-906dddf.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2081 .elementor-element.elementor-element-92f0121{z-index:5;}.elementor-2081 .elementor-element.elementor-element-92f0121.xpro-widget-bg-overlay:before{transition:background 0.3s;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2081 .elementor-element.elementor-element-f802e51{--content-width:80%;}.elementor-2081 .elementor-element.elementor-element-800b6ea{--width:60%;}}/* Start custom CSS for container, class: .elementor-element-5875c85 *//* ==========================================================================
Portfolio grid hover effect
Matches the markup structure:
========================================================================== */
.portfolio-grid-thumb {
position: relative;
overflow: hidden;
cursor: pointer;
}
.portfolio-grid-thumb img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
/* The overlay that holds the button — hidden until hover */
.portfolio-grid-thumb .project-view {
position: absolute;
inset: 0; /* top/right/bottom/left: 0 */
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 2;
}
/* The "View Project" button itself */
.portfolio-grid-thumb .project-view a {
display: inline-block;
padding: 12px 28px;
border: 2px solid #fff;
border-radius: 30px;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
transform: translateY(15px);
transition: transform 0.35s ease, background 0.25s ease, color 0.25s ease;
}
.portfolio-grid-thumb .project-view a span {
pointer-events: none;
}
.portfolio-grid-thumb .project-view a:hover {
background: #fff;
color: #111;
}
/* Hover state on the whole thumbnail */
.portfolio-grid-thumb:hover .project-view {
opacity: 1;
visibility: visible;
}
.portfolio-grid-thumb:hover .project-view a {
transform: translateY(0);
}
/* Subtle zoom on the image behind the overlay */
.portfolio-grid-thumb:hover img {
transform: scale(1.08);
}
/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
.portfolio-grid-thumb img,
.portfolio-grid-thumb .project-view,
.portfolio-grid-thumb .project-view a {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-87445a7 *//* ==========================================================================
Portfolio grid hover effect — Elementor version
Structure (as built in Elementor):
Container ← add class "portfolio-grid-wrap" here
├─ Image widget ← class "portfolio-grid-thumb" (already added)
└─ Button widget ← class "project-view" (already added)
Elementor Containers are position:relative by default, so we don't
need to set that ourselves — just overflow, stacking, and the fade.
========================================================================== */
.portfolio-grid-wrap {
overflow: hidden;
}
/* Image zoom on hover (unchanged behavior, just scoped to the wrapper now) */
.portfolio-grid-wrap img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
.portfolio-grid-wrap:hover img {
transform: scale(1.05);
}
/* The button widget itself — stack it on top of the image and hide it
until the wrapper is hovered */
.portfolio-grid-wrap .project-view {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 5;
}
.portfolio-grid-wrap:hover .project-view {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.portfolio-grid-wrap img,
.portfolio-grid-wrap .project-view {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-843d0f8 *//* ==========================================================================
Portfolio grid hover effect
Matches the markup structure:
========================================================================== */
.portfolio-grid-thumb {
position: relative;
overflow: hidden;
cursor: pointer;
}
.portfolio-grid-thumb img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
/* The overlay that holds the button — hidden until hover */
.portfolio-grid-thumb .project-view {
position: absolute;
inset: 0; /* top/right/bottom/left: 0 */
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 2;
}
/* The "View Project" button itself */
.portfolio-grid-thumb .project-view a {
display: inline-block;
padding: 12px 28px;
border: 2px solid #fff;
border-radius: 30px;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
transform: translateY(15px);
transition: transform 0.35s ease, background 0.25s ease, color 0.25s ease;
}
.portfolio-grid-thumb .project-view a span {
pointer-events: none;
}
.portfolio-grid-thumb .project-view a:hover {
background: #fff;
color: #111;
}
/* Hover state on the whole thumbnail */
.portfolio-grid-thumb:hover .project-view {
opacity: 1;
visibility: visible;
}
.portfolio-grid-thumb:hover .project-view a {
transform: translateY(0);
}
/* Subtle zoom on the image behind the overlay */
.portfolio-grid-thumb:hover img {
transform: scale(1.08);
}
/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
.portfolio-grid-thumb img,
.portfolio-grid-thumb .project-view,
.portfolio-grid-thumb .project-view a {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b10040f *//* ==========================================================================
Portfolio grid hover effect — Elementor version
Structure (as built in Elementor):
Container ← add class "portfolio-grid-wrap" here
├─ Image widget ← class "portfolio-grid-thumb" (already added)
└─ Button widget ← class "project-view" (already added)
Elementor Containers are position:relative by default, so we don't
need to set that ourselves — just overflow, stacking, and the fade.
========================================================================== */
.portfolio-grid-wrap {
overflow: hidden;
}
/* Image zoom on hover (unchanged behavior, just scoped to the wrapper now) */
.portfolio-grid-wrap img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
.portfolio-grid-wrap:hover img {
transform: scale(1.05);
}
/* The button widget itself — stack it on top of the image and hide it
until the wrapper is hovered */
.portfolio-grid-wrap .project-view {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 5;
}
.portfolio-grid-wrap:hover .project-view {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.portfolio-grid-wrap img,
.portfolio-grid-wrap .project-view {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2aabc2e *//* ==========================================================================
Portfolio grid hover effect
Matches the markup structure:
========================================================================== */
.portfolio-grid-thumb {
position: relative;
overflow: hidden;
cursor: pointer;
}
.portfolio-grid-thumb img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
/* The overlay that holds the button — hidden until hover */
.portfolio-grid-thumb .project-view {
position: absolute;
inset: 0; /* top/right/bottom/left: 0 */
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 2;
}
/* The "View Project" button itself */
.portfolio-grid-thumb .project-view a {
display: inline-block;
padding: 12px 28px;
border: 2px solid #fff;
border-radius: 30px;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
transform: translateY(15px);
transition: transform 0.35s ease, background 0.25s ease, color 0.25s ease;
}
.portfolio-grid-thumb .project-view a span {
pointer-events: none;
}
.portfolio-grid-thumb .project-view a:hover {
background: #fff;
color: #111;
}
/* Hover state on the whole thumbnail */
.portfolio-grid-thumb:hover .project-view {
opacity: 1;
visibility: visible;
}
.portfolio-grid-thumb:hover .project-view a {
transform: translateY(0);
}
/* Subtle zoom on the image behind the overlay */
.portfolio-grid-thumb:hover img {
transform: scale(1.08);
}
/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
.portfolio-grid-thumb img,
.portfolio-grid-thumb .project-view,
.portfolio-grid-thumb .project-view a {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-efce99e *//* ==========================================================================
Portfolio grid hover effect — Elementor version
Structure (as built in Elementor):
Container ← add class "portfolio-grid-wrap" here
├─ Image widget ← class "portfolio-grid-thumb" (already added)
└─ Button widget ← class "project-view" (already added)
Elementor Containers are position:relative by default, so we don't
need to set that ourselves — just overflow, stacking, and the fade.
========================================================================== */
.portfolio-grid-wrap {
overflow: hidden;
}
/* Image zoom on hover (unchanged behavior, just scoped to the wrapper now) */
.portfolio-grid-wrap img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
.portfolio-grid-wrap:hover img {
transform: scale(1.05);
}
/* The button widget itself — stack it on top of the image and hide it
until the wrapper is hovered */
.portfolio-grid-wrap .project-view {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 5;
}
.portfolio-grid-wrap:hover .project-view {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.portfolio-grid-wrap img,
.portfolio-grid-wrap .project-view {
transition: none;
}
}/* End custom CSS */