Jump to content

7.1 OVERLAP IMAGE OVER HERO

Recommended Posts

Hi all,
 
have a little diamond image that I I would like to overlap the hero. You will see the hero image actually has the diamond on it but rather than displaying it that way I would like for the png that I added to overlap that section so it looks better on the parallax.
 
I have this code but can't get it to work.
 
/* remove section bottom padding */
[data-section-id="5ef91d882801f1255c12e37b"] .content-wrapper {
    padding-bottom: 0 !important;
}
/* remove overflow hidden */
div#block-yui_3_17_2_1_1594737404430_275 .image-block-wrapper {
    overflow: visible !important;
}
/* overlap image */
div#block-yui_3_17_2_1_1594737404430_273 img {
    width: auto !important;
    bottom: -20% !important;
    top: unset !important;
    right: 0;
    z-index: 999;
}
 
My website:
www.cocosatelier.co.uk
password: caview23
 
Any help would be very appreciated, thank you in advance.
 
Chanel
cleardot.gif
 
Link to comment
  • Replies 2
  • Views 932
  • Created
  • Last Reply

Hi Tuan, 

Thank you for your help. The diamond link: https://images.squarespace-cdn.com/content/5eea9f18d522a654baa80b9b/1594577282957-FV6G7A5E5K82HZNFQW4H/diamond.png?content-type=image%2Fpng 

Your code has worked for me but I was wondering if there is a way of locking it into place so it does not shift to another position on any screens? Is that possible? Also how can I make it smaller? I tried to resize it by adding the width but it moved the position also.

Thank you so much

Chanel

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.