Customization and CSS of Heading Section

Site URL: https://www.studionitya.com/mobile-mediation-unit-bus-wrap

Hi! I used this forum to get the CSS necessary to create a hover effect on my gallery images; reducing opacity of the image while the caption shows up on the image center. I need to add a heading section to some pages and would like this same effect with the images and captions so it looks consistent throughout the site. Can anyone help?

On this page (https://www.studionitya.com/mobile-mediation-unit-bus-wrap) you will see the gallery section that is already customized above the footer and the heading section I'm trying to replace it with right above the gallery section.

Please let me know if you need any more info from me.

16 minutes ago, StudioNitya said:

Site URL: https://www.studionitya.com/mobile-mediation-unit-bus-wrap

Hi! I used this forum to get the CSS necessary to create a hover effect on my gallery images; reducing opacity of the image while the caption shows up on the image center. I need to add a heading section to some pages and would like this same effect with the images and captions so it looks consistent throughout the site. Can anyone help?

On this page (https://www.studionitya.com/mobile-mediation-unit-bus-wrap) you will see the gallery section that is already customized above the footer and the heading section I'm trying to replace it with right above the gallery section.

Please let me know if you need any more info from me.

Can you take a screenshot of the heading section you want to set hover effect? 

The image in the section attached. Similar to the hover effect of the two images in the section right below this one.

1 hour ago, bangank36 said:

Can you take a screenshot of the heading section you want to set hover effect? 

See screenshot above

@StudioNitya You mean move text over image & make text appear when hover image?

3 hours ago, tuanphan said:

@StudioNitya You mean move text over image & make text appear when hover image?

Exactly!

On 10/28/2021 at 12:03 AM, StudioNitya said:

Exactly!

Add to Design > Custom CSS

div#page-section-6176d09698459e036a3e4671 {
figcaption.image-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    z-index: 9999;
    color: white;
    opacity: 0;
    pointer-events: none;
}
.image-block:hover figcaption.image-caption-wrapper {
    opacity: 1;
}
.image-block:hover figure a:after {
    opacity: 1;
}}

On 10/29/2021 at 5:31 AM, tuanphan said:

Add to Design > Custom CSS

div#page-section-6176d09698459e036a3e4671 {
figcaption.image-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    z-index: 9999;
    color: white;
    opacity: 0;
    pointer-events: none;
}
.image-block:hover figcaption.image-caption-wrapper {
    opacity: 1;
}
.image-block:hover figure a:after {
    opacity: 1;
}}

 

Awesome! I would now like to reduce the opacity of the image in the background when you hover on it and the caption appears. 

This is the CSS i've been trying to work with: 

section[data-section-id="61f0360d71ad356043ca6f80"] {

.image-block-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.image-block-wrapper:hover a:after {
    opacity: 0.75;
}
}

Not sure where I'm going wrong.

Site URL: https://www.studionitya.com/mobile-mediation-unit-bus-wrap

I deleted the section that we were previously looking at and added another. Please find the screenshot of this below.

Here is also a screenshot of the section below it which has the effect I'm looking for:

12 hours ago, StudioNitya said:

Awesome! I would now like to reduce the opacity of the image in the background when you hover on it and the caption appears. 

This is the CSS i've been trying to work with: 

section[data-section-id="61f0360d71ad356043ca6f80"] {

.image-block-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.image-block-wrapper:hover a:after {
    opacity: 0.75;
}
}

Not sure where I'm going wrong.

Site URL: https://www.studionitya.com/mobile-mediation-unit-bus-wrap

I deleted the section that we were previously looking at and added another. Please find the screenshot of this below.

Here is also a screenshot of the section below it which has the effect I'm looking for:

change this code

.image-block-wrapper:hover a:after {
    opacity: 0.75;
}

to this

.image-block-wrapper:hover a:after {
    color: rgba(244, 246, 234,0.75) !important;
}

11 hours ago, tuanphan said:

change this code

.image-block-wrapper:hover a:after {
    opacity: 0.75;
}

to this

.image-block-wrapper:hover a:after {
    color: rgba(244, 246, 234,0.75) !important;
}

 

Sorry but no luck 😞

On 1/27/2022 at 4:27 AM, StudioNitya said:

Sorry but no luck 😞

It looks like you removed link from Image? The above works if image has a link. If you don't want to add link for image, let me know, we will tweak & give ne code