Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Overlay opacity on images


Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Try Home > Design > Color > Section Thémes > Click on your image on right > it will show setting on left. or you can also add this to Home > Design > Custom CSS .image-bl

Posted Images

Try Home > Design > Color > Section Thémes > Click on your image on right > it will show setting on left.

or you can also add this to Home > Design > Custom CSS

.image-block .image-overlay {
    background: none !important;
}

 

Link to post
On 5/28/2020 at 8:52 PM, HughJars said:

I am trying to create two paragraphs of type separated by a heading. The paragraphs should be black and the heading orange. But as you can see, the bottom block of type takes the orange colour of the subheading. 

https://indigo-dogfish-mnkf.squarespace.com/config/design/colors/section-themes/theme-editor

 

Can you share link to page in screenshot? /config is url for site owner

Link to post
  • 10 months later...

Hi @tuanphan

I need assistance adding to the coding I already have. I am having difficulty adding a clickable onto the images on my homepage. I want the user/viewer be able to hover what I already have and click on it and it opens up to the new page.

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

 

Edited by naomiokita
Link to post
5 hours ago, naomiokita said:

Hi @tuanphan

I need assistance adding to the coding I already have. I am having difficulty adding a clickable onto the images on my homepage. I want the user/viewer be able to hover what I already have and click on it and it opens up to the new page.

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

 

edit this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...