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? 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.