Jump to content

Customization and CSS of Heading Section

Recommended Posts

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.

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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? 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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.

904801046_ScreenShot2022-01-25at4_36_48PM.thumb.png.2a305ca076f56d26e4733e7a7486d630.png

Here is also a screenshot of the section below it which has the effect I'm looking for:1641078938_ScreenShot2022-01-25at4_40_35PM.thumb.png.0ac62d3ac0f3097625df5f5e49812664.png

Link to comment
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.

904801046_ScreenShot2022-01-25at4_36_48PM.thumb.png.2a305ca076f56d26e4733e7a7486d630.png

Here is also a screenshot of the section below it which has the effect I'm looking for:1641078938_ScreenShot2022-01-25at4_40_35PM.thumb.png.0ac62d3ac0f3097625df5f5e49812664.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.