Trying to create an offset backdrop effect of a solid color for images when hovering over the image

Hi! I'm wondering what css I would have to add to have a similar hover effect over images as this website:

https://morgansiggard.com

I attempted with this code, but the hover block effect is oversized and not fitting to the image and offset to the lower right of the image. Thank you in advance if anyone knows!

/* Apply the effect to the image */
.sqs-block-image:hover {
  position: relative;
  z-index: 1;
}

/* Create the orange offset backdrop */
.sqs-block-image:hover::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: -10px;
  bottom: -10px;
  background-color: orange;
  z-index: -1;
}

Hey there,

No probs.

Firstly, here is the code they've used:

.image-block-outer-wrapper:not(.image-block-v2) .image-block-wrapper:hover {
    box-shadow: 10px 10px #b24936 !important;
}

As you can see, you can keep this simple with a box shadow. However, I would make some improvements:

It's applied to all image blocks on the site, so you might want to be more specific by using an ID e.g.

#blockid .image-block-wrapper:hover {
    box-shadow: 10px 10px #b24936;
}

I've removed the !important as it shouldn't be needed.

Also if you're using Fluid Engine, you don't need the first part of their CSS.

If you wanted it to be a bit smoother, you can add a transition like this and just adjust the timing and colour etc to fit you needs.

// Add transition
.image-block-wrapper {
    transition: box-shadow .3s ease-in;
}
// Add Shadow
.image-block-wrapper:hover {
    box-shadow: 10px 10px #b24936;
}

Let me know if that works!

10 hours ago, KwameAndCo said:

Hey there,

No probs.

Firstly, here is the code they've used:

.image-block-outer-wrapper:not(.image-block-v2) .image-block-wrapper:hover {
    box-shadow: 10px 10px #b24936 !important;
}

As you can see, you can keep this simple with a box shadow. However, I would make some improvements:

It's applied to all image blocks on the site, so you might want to be more specific by using an ID e.g.

#blockid .image-block-wrapper:hover {
    box-shadow: 10px 10px #b24936;
}

I've removed the !important as it shouldn't be needed.

Also if you're using Fluid Engine, you don't need the first part of their CSS.

If you wanted it to be a bit smoother, you can add a transition like this and just adjust the timing and colour etc to fit you needs.

// Add transition
.image-block-wrapper {
    transition: box-shadow .3s ease-in;
}
// Add Shadow
.image-block-wrapper:hover {
    box-shadow: 10px 10px #b24936;
}

Let me know if that works!

this seems correct -- and i have put this code in exactly into the css, but for some reason there is no change on my website. I'm a complete noob to code so I'm not sure if there's information I need to put before this? thank you so much for all this info!

Share your website.

Hi! This is very late and I missed your reply. If you're still able to help -- my website is mirandajohoward.com. Thank you! @KwameAndCo

On 8/16/2023 at 9:09 PM, MirandaHoward said:

Hi! This is very late and I missed your reply. If you're still able to help -- my website is mirandajohoward.com. Thank you!

You can use this code to Custom CSS box

div.image-block:hover .sqs-image {
    box-shadow: 10px 10px #b24936 !important;
}