Delete padding / margin on 'Cover image'

Shapely
1

Hi there. I want to import an image and show another image when hovering over. I got that working (thanks to THIS video), the only problem is that I can’t find a way to delete the padding/margin of the cover image. Therefore the overlapping photo is always slightly smaller than the underlying photo. In the video it’s a simple feature to delete the padding (see screenshot), but maybe that has to do with the fact that i’m using another theme.

I’m already using custom CSS, including ‘margin: 0’. But that doesn’t do the job. I also tried using ‘Padding: 0’ instead, but no succes. Hope someone can help me out!

A screenshot of the video where they can easily delete the padding:

Delete padding cover image 1
Delete padding cover image 11343×789 70.2 KB

2

Hey there

Please provide url of the page, let me check it :slight_smile:

Regards

3

Hi, thanks for the reply. URL = www. supaliciousband .nl (Navigate to ‘Band’)

Edit: to clarify. I want both images to be exact the same size and behave exactly the same (e.g. responsive)

4

Hey there

You need to save this CSS code in the page CSS, don’t apply it globally :slight_smile:

.wp-block-cover, .wp-block-cover-image, .custom-image {
    padding: 0px;
}

Let me know results

5

Hi, that’s awesome! I’ve just added it to custom CSS and it works! … but since you mentioned to add it in the page CSS and not globally… is this the right way?

6

Hi

If you add it globally it will be applied on the website, if you add it on the page then only on that page.
You can leave it as is if its not affected anything else.

Regards