thesoulfulentrepreneur

Thank you very much @tuanphan - I so greatly appreciate your support. I had to add !important to the border property but, it did the trick! 🙂 

This is fantastic @tuanphan I've been going round and round trying to give a border to image shapes that don't end up a square around an oval -impossible! This is a great workaround. Many thanks for posting.

I think you should use a normal image, then we will use CSS to make curve on top left top right corners.
I did an example with image at bottom of page'

div#block-efff2a01b90cc35816e9 .image-block-wrapper { border: 1px solid #d1a556; padding: 10px; border-top-left-radius: 300px; border-top-right-radius: 300px; } div#block-efff2a01b90cc35816e9 img { border-top-left-radius: 300px; border-top-right-radius: 300px; }  

Is there a way to get the counter to start when you scroll past it, instead of when you first land on the page? 

@tuanphan Oh amazing, I adjusted the code for the first 3 and that did the trick. I'll work on the rest. THANK YOU!! 😄

Use some code like this (this code for third image)
div#block-6329d15594ec314c5a43ff9a:hover img { opacity: 1 !important; content: url(https://cdn.pixabay.com/photo/2022/10/16/13/53/early-morning-7525151__480.jpg); }  

Site URL: https://www.thesoulful.squarespace.com
Hello!
Site URL: https://www.thesoulful.squarespace.com 
Pass: livesoulfully
I am interested in using CSS to apply borders to the images on a website as efficiently as possible.
I referenced the solutions in this thread, however, none seemed to do the trick: 
I got seemingly close with this:
.sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } However, two issues arise:
1. There are several images I do not wish to target. I assume that requires us to get more specific with targeting, like using the section ID, like this (this is for the home header):
section[data-section-id="6328d3a483fd37bbf384a8f6"] .sqs-block-image {     border: 1px solid #d1a556 !important;   padding: 10px !important; } 2. In some cases, the padding doesn't apply evenly, for example, there may be more/less padding on the top/bottom of the image depending on the screen width. I have attached some examples for visual reference. I tried to solve this by switching the design setting of the image block from 'fit' to 'fill', but that introduces other proportion-related issues across screen sizes, which I'd like to avoid.
Does anyone have any thoughts as to how to implement? 
Thanks in advance!

@tuanphan my apologies, in the meantime I answered my own question. thanks for your support!

You are amazing - THANK YOU!!!

@stellaehabib try adding this code to home > design > custom css
header.Header.Header--top { position: absolute; top: 0; left: 0; right: 0; z-index: 999; background: transparent; } header.Header.Header--bottom.Header--overlay { position: absolute; top: 180px; left: 0; right: 0; z-index: 999; }