Image Hover Overlay Text - tweak needed

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

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. 

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. 

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

@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

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

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!

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

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!

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

11 hours ago, tuanphan said:

Try this new code

.image-block * {
    transition: 1s !important;
}

 

tuanphan, you are the best! This worked perfectly.

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

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;*/

    }

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

16 hours ago, tuanphan said:

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

 

Tuanphan, you are the best!

• 
• Member
• •  1

On 3/16/2023 at 11:37 PM, Elisabethh said:

• 
• Member
• •  1

 

Posted August 20, 2021

@tuanphan Were you able to figure out a solution to make the overlay white (transparent) instead of black? I am having the same issue

Can you share link to page where you use image? We can adjust code easier