Jump to content

Image Hover Overlay Text - tweak needed

Go to solution Solved by jpeter,

Recommended Posts

Site URL: https://www.joeblackham.com/work

Hey - I have 9 images on a page and I'm trying to get a hover effect which fills the entire image, but it's only covering the top 75% - any help would be appreciated as I'm not a CSS whizz! This is the code I am using at the moment:

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 width:100%;
 height:100;
  border: 2px solid white;
  padding: 1px;
  margin: 0px;
 position: center !important;
 pointer-events: none !important;
}

&:hover,
&:focus {
 opacity: 1;
}

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 100%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
   }

.image-caption p {
 font-size: 18px !important;
 font-weight: semibold !important;
 color: #ffffff !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important;
}

.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
 cursor: default;
 pointer-events: all !important;
}

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
 background: #ffffff;
 opacity: .9;
}

Screen Shot 2020-06-04 at 23.25.26.png

Screen Shot 2020-06-04 at 23.27.45.png

Screen Shot 2020-06-04 at 23.27.39.png

Link to comment
  • 1 year later...
On 8/12/2021 at 7:04 PM, Sarah-Daye said:

Is there a way to get the overlay white, not black? I copied the above code, made a few color tweaks and everything looks great, I just can't change the color of the actual overlay. 

Screen Shot 2021-08-12 at 8.03.57 AM.png

Hi. Can you share link to your site? We can help easier

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 8/20/2021 at 5:08 AM, milkttoast said:

@tuanphan @Sarah-Daye Were you able to figure out a solution to make the overlay white instead of black? I am having the same issue

Can you share link to page where you have problem? We can help easier

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 8/28/2021 at 1:35 AM, tomalexander96 said:

Does anyone know how to make this overlay smoothly transition upon hover? I've managed to make it transition in by adding a "transition: 1s;" rule, but when the mouse is moved it does not transition back smoothly, just goes back to normal immediately. 

Here is my site, and the page in question:

https://www.tomalexanderart.com/gallery-2

Thank you for any help!

use this code

div#block-yui_3_17_2_1_1629151089490_7573 * {
    transition: 1s !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
  • 1 month later...
On 8/30/2021 at 5:18 AM, tuanphan said:

use this code

div#block-yui_3_17_2_1_1629151089490_7573 * {
    transition: 1s !important;
}

 

Hi tuanphan! Thank you so much for your help!

This code worked perfectly, but only for the homepage of my site for some reason. On any other page, the transition doesn't fade out, it just turns off abruptly. Do you have any idea why that might be happening?

For reference, the image at the bottom of this page that says "Crushed Skate Shop" fades in, but doesn't fade out:

https://www.tomalexanderart.com/contracts-1

Thank you so much!

Link to comment
On 10/12/2021 at 5:32 AM, tomalexander96 said:

Hi tuanphan! Thank you so much for your help!

This code worked perfectly, but only for the homepage of my site for some reason. On any other page, the transition doesn't fade out, it just turns off abruptly. Do you have any idea why that might be happening?

For reference, the image at the bottom of this page that says "Crushed Skate Shop" fades in, but doesn't fade out:

https://www.tomalexanderart.com/contracts-1

Thank you so much!

Try this new code

.image-block * {
    transition: 1s !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
  • 2 months later...

Hey guys! I'm trying to do something similar to this again and running into some weird issues.

Site: https://www.lupoarms.com

Password: lupo

I think that some of the CSS I wrote managed to break the .gif elements out of the code box, as they refuse to center without being pushed around with padding (which I want to avoid for mobile optimization) and also spill over into the footer. Any ideas?

My CSS:

/*my code*/
.image-swap img{
  position: absolute;
  height:auto;
}
.image-swap img{
    display: block;
    margin-left: center;
    margin-right: center;
}
.image-swap img:nth-child(1) {
  z-index: 1;
  transition: .5s;
}
.image-swap img:nth-child(1):hover {
 opacity:0;
}


#imageCenter {
padding-left: 110px;
  padding-bottom: 400px;
}

 

Link to comment
1 hour ago, tomalexander96 said:

Hey guys! I'm trying to do something similar to this again and running into some weird issues.

Site: https://www.lupoarms.com

Password: lupo

I think that some of the CSS I wrote managed to break the .gif elements out of the code box, as they refuse to center without being pushed around with padding (which I want to avoid for mobile optimization) and also spill over into the footer. Any ideas?

My CSS:

/*my code*/
.image-swap img{
  position: absolute;
  height:auto;
}
.image-swap img{
    display: block;
    margin-left: center;
    margin-right: center;
}
.image-swap img:nth-child(1) {
  z-index: 1;
  transition: .5s;
}
.image-swap img:nth-child(1):hover {
 opacity:0;
}


#imageCenter {
padding-left: 110px;
  padding-bottom: 400px;
}

 

Did a little more work and got it a little better. Still not quite centered, though, and looks horrible on mobile. Updated CSS:

.image-swap img{
  position: absolute;
  height:auto;
}

.image-swap img{
    display: inline-block;
    margin-left: center;
    margin-right: center;
  text-align: center;
}
.image-swap img:nth-child(1) {
  z-index: 1;
  transition: .5s;
}
.image-swap img:nth-child(1):hover {
 opacity:0;
}

#block-yui_3_17_2_1_1641240410508_1657 {
 display: block;
  margin: 0 auto;
  width: 50%;
 
}

.container {
    background-color: #ff5733;
    width: 100%;
  height: 100%;
    margin: 0 auto;
    /*overflow: hidden;*/

    }

Link to comment
4 hours ago, tomalexander96 said:

Did a little more work and got it a little better. Still not quite centered, though, and looks horrible on mobile. Updated CSS:

.image-swap img{
  position: absolute;
  height:auto;
}

.image-swap img{
    display: inline-block;
    margin-left: center;
    margin-right: center;
  text-align: center;
}
.image-swap img:nth-child(1) {
  z-index: 1;
  transition: .5s;
}
.image-swap img:nth-child(1):hover {
 opacity:0;
}

#block-yui_3_17_2_1_1641240410508_1657 {
 display: block;
  margin: 0 auto;
  width: 50%;
 
}

.container {
    background-color: #ff5733;
    width: 100%;
  height: 100%;
    margin: 0 auto;
    /*overflow: hidden;*/

    }

To center Change this code

.image-swap img {
    display: inline-block;
    margin-left: center;
    margin-right: center;
    text-align: center;
}

to

.image-swap img {
    display: block;
    left: 50%;
    transform: translateX(-50%);
}

 

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.