Skip to content
IMPORTANT: Add JS AFTER
});//close all jquery

IMPORTANT: You can add a Card Wrapper Link to Container Card's Layout > Additional Options Field

Copy one of the Starter Examples Below to Your Stage

Then Add Starter Code from One of the Accordions Below

				
					/* *****************************
 * SERVICE BOXES
 * *************************** */
.service-box {
  cursor: auto;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  min-height: 30rem !important;
  justify-content: center;
  overflow: hidden !important;
}
a.service-box {
  cursor: pointer;
}
.service-box > .service-box-title {
  height: auto;
  text-align: center;
  width: 100%;
  z-index: 1;
  transform: translateY(0); /* Hidden position */
  opacity: 0; /* Initially hidden */
  transition: transform 0.25s ease-in-out, opacity .75s ease-in-out !important;	
}
.service-box:hover > .service-box-title {
  height: 0 !important;
  opacity: 0 !important;
  transform: translateY(0) !important;
  transition: transform .5s ease-in-out, opacity 0.25s ease-in-out !important;
}
.service-box .content-box {
  position: absolute;
  width: 100%;
  height: 110%;	
  opacity: 0;	
  bottom: 0;
  top: 100%;
  transform: translateY(100%);
  transition: 
	  height 0.5s ease-in-out,
	  opacity 0.5s ease-in-out, 
	  bottom 0.5s ease-in-out, 
	  top 0.5s ease-in-out, 
	  transform 0.5s ease-in-out;
  z-index: 0;
}
.service-box:hover .content-box {
  transform: translateY(0);
  opacity: 1;
  height: 100%;
  bottom: 0%;
  top: 0;
}
.service-box:hover .content-box .service-box-title {
  height: auto !important;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;	
}

/* SERVICE BOX MOBILE LAYOUT */
@media (max-width: 480px) {
	.service-box:not(.section-mega-menu .service-box){
	  min-height: 34rem !important;
	}	
	.service-box>.service-box-title {
	  height: 0 !important;
	  opacity: 0 !important;
	  transform: translateY(-50%);
	  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;	
	}
	.service-box .content-box {
	  transform: translateY(0) !important;
	  opacity: 1;
	  height: 100%;
	  bottom: 0%;
	  top: 0;
	}
	.service-box .content-box .service-box-title {
	  height: auto !important;
	  opacity: 1;
	  transform: translateY(0);
	  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;	
	}
	
}
				
			
				
					// SERVICE BOXES
document.addEventListener('DOMContentLoaded', function () {
  const serviceBoxes = document.querySelectorAll('.service-box');

  function centerTitles(applyFadeIn = false) {
    serviceBoxes.forEach(box => {
      const title = box.querySelector('.service-box-title');
      const boxHeight = box.offsetHeight;
      const titleHeight = title.offsetHeight;

      // Calculate top padding/margin to center the title
      const topPadding = (boxHeight - titleHeight) / 2;

      title.style.transform = `translateY(${topPadding}px)`;

      // Apply fade-in on initial load
      if (applyFadeIn) {
        title.style.opacity = '0'; // Start hidden
        setTimeout(() => {
          title.style.transition = 'opacity 0.75s ease-in-out'; // Add fade-in transition
          title.style.opacity = '1'; // Fade in
        }, 100); // Slight delay to ensure positioning is complete
      }
    });
  }

  // Initial centering with fade-in
  centerTitles(true);

  // Re-center titles on window resize without fade-in
  window.addEventListener('resize', () => centerTitles(false));

  // Handle hover effect
  serviceBoxes.forEach(box => {
    const title = box.querySelector('.service-box-title');

    box.addEventListener('mouseenter', () => {
      title.style.transform = 'translateY(-100%)'; // Slide the title up
      title.style.transition = 'transform 0.5s ease-in-out, opacity 0.3s ease-in-out';
    });

    box.addEventListener('mouseleave', () => {
      const boxHeight = box.offsetHeight;
      const titleHeight = title.offsetHeight;
      const topPadding = (boxHeight - titleHeight) / 2;
      title.style.transform = `translateY(${topPadding}px)`; // Re-center
    });
  });
});

CSS is the Same as the Default CSS above - JS Below Aligns Title to Bottom

				
					// SERVICE BOXES
document.addEventListener('DOMContentLoaded', function() {
  const serviceBoxes = document.querySelectorAll('.service-box');

  function positionTitlesAtBottom(applyFadeIn = false) {
    serviceBoxes.forEach(box => {
      const title = box.querySelector('.service-box-title');
      const boxHeight = box.offsetHeight;
      const titleHeight = title.offsetHeight;

      // Set the title at the bottom
      const bottomPadding = boxHeight - titleHeight;

      title.style.transform = `translateY(${bottomPadding}px)`;

      // Apply fade-in only on initial load
      if (applyFadeIn) {
        title.style.opacity = '0'; // Start hidden
        setTimeout(() => {
          title.style.transition = 'opacity 0.5s ease-in-out'; // Add fade-in transition
          title.style.opacity = '1'; // Fade in
        }, 100); // Slight delay to ensure positioning is complete
      }
    });
  }

  // Initial positioning at the bottom with fade-in
  positionTitlesAtBottom(true);

  // Re-position titles on window resize without fade-in
  window.addEventListener('resize', () => positionTitlesAtBottom(false));

  // Handle hover effect
  serviceBoxes.forEach(box => {
    const title = box.querySelector('.service-box-title');
    
    box.addEventListener('mouseenter', () => {
      title.style.transform = 'translateY(-100%)'; // Slide the title up
      title.style.transition = 'transform 0.5s ease-in-out, opacity 0.3s ease-in-out';
    });

    box.addEventListener('mouseleave', () => {
      const boxHeight = box.offsetHeight;
      const titleHeight = title.offsetHeight;
      const bottomPadding = boxHeight - titleHeight;
      title.style.transform = `translateY(${bottomPadding}px)`; // Return to bottom
    });
  });
});

				
			
				
					/* *****************************
 * SERVICE BOXES
 * *************************** */
.service-box {
  cursor: auto;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  min-height: 40rem !important;
  justify-content: center;
  overflow: hidden !important;
  will-change: transform; 
  backface-visibility: hidden;  /* Reduce anti-aliasing artifacts */
  transform: translateZ(0); /* Force GPU rendering to reduce edge artifacts */
}
a.service-box {
  cursor: pointer;
}

/* Background image pseudo-element */
.service-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: grayscale(1);
  transition: filter 1s ease;
  z-index: -1; 
}

/* Hover state */
.service-box:hover {
 background: transparent !important;	/* Ensure parent container doesn’t introduce a white background */
  height: 100%;
  transform: scale(1.1);
  z-index: 20;
}

.service-box:hover:before {
  filter: grayscale(0);
  transition: filter 1s ease;
}

/* Initial heading (hidden by default) */
.service-box > .service-box-title {
  height: auto;
  text-align: center;
  width: 100%;
  z-index: 1;
  opacity: 0; /* Hidden until JavaScript positions and fades it in */
  transition: opacity 0.5s ease-in-out !important;
}

/* Fade out initial heading on hover */
.service-box:hover > .service-box-title {
  opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

/* Content box (hidden by default) */
.service-box .content-box {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out !important;
  z-index: 0;
}

/* Fade in content box on hover */
.service-box:hover .content-box {
  opacity: 1;
}

/* Ensure content box title is visible */
.service-box:hover .content-box .service-box-title {
  height: auto !important;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Service Box Heading Title Button */
.service-box .box-btn {
  background: url(/wp-content/uploads/2025/05/BUTTON-WHITE.png) no-repeat center;
  background-size: contain;
  display: inline-block;
  padding: 1.15rem 4rem 1rem;
  text-align: center;
  min-width: 200px !important;
}

.service-box .box-btn .elementor-heading-title {
  transition: all 0.5s ease-in-out !important;
}

.service-box .box-btn:hover .elementor-heading-title {
  color: #9C1117 !important;
}

/* SERVICE BOX MOBILE LAYOUT */
@media (max-width: 480px) {
  .service-box:not(.section-mega-menu .service-box) {
    min-height: 34rem !important;
  }
  .service-box > .service-box-title {
    height: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out;
  }
  .service-box .content-box {
    opacity: 1;
    height: 100%;
  }
  .service-box .content-box .service-box-title {
    height: auto !important;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
  }
}
				
			
				
					// SERVICE BOXES
document.addEventListener('DOMContentLoaded', function () {
  const serviceBoxes = document.querySelectorAll('.service-box');

  function positionTitlesAtBottom(applyFadeIn = false) {
    serviceBoxes.forEach((box) => {
      const title = box.querySelector('.service-box-title');
      const boxHeight = box.offsetHeight;
      const titleHeight = title.offsetHeight;

      // Set the title at the bottom
      const bottomPadding = boxHeight - titleHeight;
      title.style.transform = `translateY(${bottomPadding}px)`;

      // Apply fade-in only on initial load
      if (applyFadeIn) {
        title.style.opacity = '0'; // Start hidden
        setTimeout(() => {
          title.style.transition = 'opacity 0.5s ease-in-out';
          title.style.opacity = '1'; // Fade in
        }, 100);
      }
    });
  }

  // Initial positioning at the bottom with fade-in
  positionTitlesAtBottom(true);

  // Re-position titles on window resize without fade-in
  window.addEventListener('resize', () => positionTitlesAtBottom(false));
});

JS is the same as the Hover Fade above

				
					/* *****************************
 * SERVICE BOXES
 * *************************** */
.service-box {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  min-height: 30rem !important;
  justify-content: center;
  overflow: hidden !important;
  will-change: transform; 
  backface-visibility: hidden;  /* Reduce anti-aliasing artifacts */
  transform: translateZ(0); /* Force GPU rendering to reduce edge artifacts */
}


/* Background image pseudo-element */
.service-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: saturate(0);
  transition: filter 1s ease;
  z-index: -1; 
}


/* Hover state */
.service-box:hover {
  background: transparent !important;	/* Ensure parent container doesn’t introduce a white background */	
  height: 100%;
  transform: scale(1.1);
  z-index: 20;
}
.service-box:hover:before {
  filter: saturate(1);
  transition: filter 1s ease;
}

/* Initial heading (hidden by default) */
.service-box > .service-box-title {
  height: auto;
  text-align: center;
  width: 100%;
  z-index: 1;
  opacity: 0; /* Hidden until JavaScript positions and fades it in */
  transition: opacity 0.75s ease-in-out,transform 0.5s ease-in-out !important;
}

/* Fade out initial heading on hover */
.service-box:hover > .service-box-title {
  opacity: 0 !important;
  transition: opacity 0.35s ease-out !important;
}

/* Content box (hidden by default) */
.service-box .content-box {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out !important;
  z-index: 0;
}

/* Fade in content box on hover */
.service-box:hover .content-box {
  opacity: 1;
}

/* Ensure content box title is visible */
.service-box:hover .content-box .service-box-title {
  height: auto !important;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Service Box Heading Title Button */
.service-box .box-btn {
	background-color: #FFF;
  background-size: contain;
  display: inline-block;
  padding: 1.15rem 4rem 1rem;
  text-align: center;
  min-width: 200px !important;
}
.service-box .box-btn .elementor-heading-title {
  transition: all 0.5s ease-in-out !important;
}
.service-box .box-btn:hover .elementor-heading-title {
  color: #9C1117 !important;
}

/* SERVICE BOX MOBILE LAYOUT */
@media (max-width: 480px) {
  .service-box:not(.section-mega-menu .service-box) {
    min-height: 30rem !important;
  }
  .service-box > .service-box-title {
    height: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out;
  }
  .service-box .content-box {
    opacity: 1;
    height: 100%;
	background-image: linear-gradient(180deg, #00000000 0%, #00000050 100%) !important;
  }
  .service-box .content-box .service-box-title {
    height: auto !important;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
  }
}

				
			
				
					// SERVICE BOXES
document.addEventListener('DOMContentLoaded', function () {
  const serviceBoxes = document.querySelectorAll('.service-box');

  function positionTitlesAtBottom(applyFadeIn = false) {
    serviceBoxes.forEach((box) => {
      const title = box.querySelector('.service-box-title');
      const boxHeight = box.offsetHeight;
      const titleHeight = title.offsetHeight;

      // Set the title at the bottom
      const bottomPadding = boxHeight - titleHeight;
      title.style.transform = `translateY(${bottomPadding}px)`;

      // Apply fade-in only on initial load
      if (applyFadeIn) {
        title.style.opacity = '0'; // Start hidden
        setTimeout(() => {
          title.style.transition = 'opacity 0.5s ease-in-out';
          title.style.opacity = '1'; // Fade in
        }, 100);
      }
    });
  }

  // Initial positioning at the bottom with fade-in
  positionTitlesAtBottom(true);

  // Re-position titles on window resize without fade-in
  window.addEventListener('resize', () => positionTitlesAtBottom(false));
});
				
			
				
					/* *****************************
 * SERVICE BOXES
 * *************************** */
.service-box {
  cursor: auto;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  min-height: 30rem !important;
  justify-content: center;
  overflow: hidden !important;
}	
a.service-box {
  cursor: pointer;
}
.service-box>.service-box-title {
  height: auto;
  text-align: center;
  width: 100%;
  z-index: 1;
  transform: translateY(0);
  opacity: 0;
  transition: transform 0.95s ease-in-out, opacity 1.5s ease-in-out .5s !important;
}
.service-box:hover>.service-box-title {
  transform: translateY(-100%) !important;
  opacity: 0;
  transition: transform 0.95s ease-in-out, opacity 0.5s ease-in-out !important;
}
.service-box .content-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  transform: translateY(-100%);
  transition: transform 0.95s ease-in-out .15s !important;
  z-index: 0;
}
.service-box:hover .content-box {
  transform: translateY(0);
}
.service-box .content-box .service-box-title {
  height: auto;
  transform: translateY(0);
  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
}


/* SERVICE BOX MOBILE LAYOUT */
@media (max-width:480px) {
  .service-box:not(.section-mega-menu .service-box) {
    min-height: 34rem !important;
  }
  .service-box>.service-box-title {
    transform: translateY(-100%);
    opacity: 0 !important;
    transition: transform 0.5s ease-in-out;
  }
  .service-box .content-box {
    transform: translateY(0) !important;
  }
	
}
				
			
				
					// SERVICE BOXES
document.addEventListener('DOMContentLoaded',function(){
  const serviceBoxes=document.querySelectorAll('.service-box');
  function positionTitlesAtTop(applyFadeIn=false){
    serviceBoxes.forEach(box=>{
      const title=box.querySelector('.service-box-title');
      if(!title||title.closest('.content-box')){
        console.warn('No top-level .service-box-title found in:',box);
        return;
      }
      title.style.transform='translateY(0px)';
      title.style.opacity=applyFadeIn?'0':'1';
      if(applyFadeIn){
        setTimeout(()=>{
          title.style.transition='opacity 0.5s ease-in-out';
          title.style.opacity='1';
        },100);
      }
    });
  }
  positionTitlesAtTop(true);
  window.addEventListener('resize',()=>positionTitlesAtTop(false));
  serviceBoxes.forEach(box=>{
    const title=box.querySelector('.service-box-title');
    const contentBox=box.querySelector('.content-box');
    if(!title||title.closest('.content-box')){
      console.warn('No top-level .service-box-title found in:',box);
      return;
    }
    if(!contentBox){
      console.warn('No .content-box found in:',box);
      return;
    }
    box.addEventListener('mouseenter',()=>{
      title.style.transform='translateY(-100%)';
      title.style.opacity='0';
      title.style.transition='transform 0.95s ease-in-out,opacity 0.75s ease-in-out';
      contentBox.style.transform='translateY(0)';
      contentBox.style.transition='transform 0.75s ease-in-out';
    });
    box.addEventListener('mouseleave',()=>{
      title.style.transform='translateY(0px)';
      title.style.opacity='1';
      title.style.transition='transform 0.95s ease-in-out,opacity 0.5s ease-in-out';
      contentBox.style.transform='translateY(-100%)';
      contentBox.style.transition='transform 0.75s ease-in-out';
    });
  });
});

Title One

This Text
That Text
The Other Text
Even More Text

Learn More

Title Two

This Text
That Text
The Other Text
Even More Text

Learn More

Title Three Longer

This Text
That Text
The Other Text
Even More Text

Learn More

Title Four

This Text
That Text
The Other Text
Even More Text

Learn More

Title Five

This Text
That Text
The Other Text
Even More Text

Learn More

Title One

Title One

Convallis conubia et nostra fusce ridiculus congue gravida. Dignissim et nec dictum fames tempus. Euismod tempor rutrum varius, finibus purus curabitur. Non penatibus ullamcorper cras tortor quis. Lectus habitasse dictum nunc platea tellus. Avitae fames primis montes sit, penatibus auctor efficitur amet.

Title Two

Title Two

Convallis conubia et nostra fusce ridiculus congue gravida. Dignissim et nec dictum fames tempus. Euismod tempor rutrum varius, finibus purus curabitur. Non penatibus ullamcorper cras tortor quis. Lectus habitasse dictum nunc platea tellus. Avitae fames primis montes sit, penatibus auctor efficitur amet.

Title Three

Title Three

Convallis conubia et nostra fusce ridiculus congue gravida. Dignissim et nec dictum fames tempus. Euismod tempor rutrum varius, finibus purus curabitur. Non penatibus ullamcorper cras tortor quis. Lectus habitasse dictum nunc platea tellus. Avitae fames primis montes sit, penatibus auctor efficitur amet.

Title Top Example

https://cooper.nice.webservice.team/

Galveston

Galveston

Reserve a table

Friendswood

Friendswood

Reserve a table

join us

This field is for validation purposes and should be left unchanged.
JLB - Nashville Web Design & SEO Services
Horton - Nashville Web Design & SEO Services
Nice Branding - Nashville Branding Agency & Web Design Services

join us

This field is for validation purposes and should be left unchanged.