Slide Up/Reveal Code on a Image Block

Site URL: https://www.legendsfc.net/directors-and-admin

We are looking to recreate something similar to the example at the attached Site URL. Can anyone provide the code necessary to do this, if it is possible?

Thanks in advance, DL

@bangank36 @tuanphan are you able to help? Your assistance is greatly appreciated. 👍

8 minutes ago, DarrenLyons said:

@bangank36 @tuanphan are you able to help? Your assistance is greatly appreciated. 👍

I am setting up a detail so others can follow as well

Paste this snippet into your Design->Custom CSS. it will help turn Poster image block within a section into sliding caption

:root {
    --overlay-color: #f0d23d;
    --text-color: #000;
    --animate-type: ease;
    --heading-font: inherit;
    --heading-font-size: inherit;
    --body-font: inherit;
    --body-font-size: inherit;
  
}
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title * {
  display: none;
}
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h1,
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h2,
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h3,
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper .image-title h4 {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  font-family: var(--heading-font);
}
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-title-wrapper *:not([data-rte-preserve-empty="true"]) {
  display: block;
  text-align: center;
  color: var(--text-color);
  font-family: var(--body-font);
}
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image .image-card-wrapper {
  background: var(--overlay-color);
  transition: .5s var(--animate-type);
  height: 0;
  overflow: hidden;
  top: auto !important;
}
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image:hover {
  cursor: pointer;
}
section[data-section-id="5ff9b43fb796f940d47ba48c"] .sqs-block-image:hover .image-card-wrapper {
  height: 100%;
}

Use this extension to find the correct section id and replace the text "section[data-section-id="5ff9b43fb796f940d47ba48c"]" in the above snippet

The :root section allow you to change some basic style of the effect such color or font family, caption structure is heading 4 - paragraph 2 - space - paragraph 4 - paragraph 2

This all looks great. When using the ID extension, I do not get a data section code, only a block code. Please see attached screen shot.

I think this is preventing the code from working.

2 minutes ago, DarrenLyons said:

This all looks great. When using the ID extension, I do not get a data section code, only a block code. Please see attached screen shot.

I think this is preventing the code from working.

What is your template name, did it support index page section?

You can also replace the section by the collection id to apply on the whole page

The template is "Heights", I am unaware of what it may or may not support.

I am reluctant to use the collection id as we will be utilizing other image blocks on the page.

@bangank36 please advise

https://www.legendsfc.net/directors-and-admin

Can you share your site url? We can check code easier