Product page - Image with text banner, how to add custom CSS code

[JGTQM2018]

Hi guys, thanks taking a look at my questions. 

I'm trying to create a banner that would look like https://prnt.sc/g1jLtKwXO9Mb like the image is outside the section.  I'm currently using Dawn theme and default product page, and i'm just adding a image with text section. 

Would it be possible to edit this with just the custom CSS, if not  what code am i looking at? 

I'm not sure how does that image popping out is called. 

Thank you for you help and time 🙂 

[shahrozbabar5]

Hi @JGTQM2018 , there are 3 ways to do this, The first one is to modify the code for this particular section, and the other one is to resize the image according to the theme's default section size. and the 3rd one is custom CSS. to do custom CSS you may do it from your theme customizing settings and can add a short code but if you know the section class or ID, do you know to code?

[JGTQM2018]

Hi Shahrozbabar5, 

Thank you for replying, Ive already tried to resize the image according to the theme default section size but its not looking like its outside the section. 

And to answer your questions, for option 3 no I dont know the code, I've tried a few time but it still wasn't working . 

[JGTQM2018]

I've actually came up with  this code in the custom CSS section but now the image floating wont appear on the section above, any idea? 

.background-transparent {
border: none;
box-shadow: none;
}

.color-background-2 {
background-color: #000000;
color: #ffffff;
}

.h1 {
color: #ffffff;
}

.image-with-text {
position: relative;
overflow: visible;
}

.image-with-text img {
position: absolute;
top: -20px;
left: 0;
width: 100%;
z-index: 10;
height: auto;
}

[JGTQM2018]

Update @shahrozbabar5 

I've updated my theme code, but it still not showing :(, please let me know what I did wrong and how can i fix it. Thank you 

 on CSS base 

/* product page bomber section image_with_text_87axeJ overflow z-index. */
.image_with_text_87axeJ{
position: absolute !important;
top: -20px !important;
left: 0;
width: 100%;
z-index: 10 !important;
height: auto !important;
overflow-x: visible !important;
}

and on the template code of my product page for the section above and section below 

"rich_text_GFV6Bx": {
"type": "rich-text",
"blocks": {
"heading_Cx6DKj": {
"type": "heading",
"settings": {
"heading": "<strong>{{ product.title }}<\/strong>",
"heading_size": "h1"
}
}
},
"block_order": [
"heading_Cx6DKj"
],
"custom_css": [
".image-with-text {position: relative; overflow: visible;}"
],
"settings": {
"desktop_content_position": "center",
"content_alignment": "center",
"color_scheme": "",
"full_width": true,
"padding_top": 40,
"padding_bottom": 40
}
},
"image_with_text_87axeJ": {
"type": "image-with-text",
"blocks": {
"caption_8CVJ4T": {
"type": "caption",
"settings": {
"caption": "Add a tagline",
"text_style": "caption-with-letter-spacing",
"text_size": "medium"
}
},
"heading_A8t6Qr": {
"type": "heading",
"settings": {
"heading": "Image with text",
"heading_size": "h1"
}
},
"text_MnCQ7W": {
"type": "text",
"settings": {
"text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>",
"text_style": "body"
}
}
},
"block_order": [
"caption_8CVJ4T",
"heading_A8t6Qr",
"text_MnCQ7W"
],
"custom_css": [
".background-transparent {border: none; box-shadow: none;}",
".color-background-2 {background-color: #000000; color: #ffffff;}",
".h1 {color: #ffffff;}",
".image-with-text {position: relative; overflow: visible;}",
".image-with-text img {position: absolute; top: -20px; left: 0; width: 100%; z-index: 10; height: auto;}",
".image_with_text_87axeJ{position: relative !important;z-index: 10 !important;}"
],
"settings": {
"image": "shopify:\/\/shop_images\/JVCMX-N122B_1_copy_da77bd92-28a6-4343-ab63-43d31406be83_copy.png",
"height": "adapt",
"desktop_image_width": "medium",
"layout": "text_first",
"desktop_content_position": "top",
"desktop_content_alignment": "left",
"content_layout": "no-overlap",
"section_color_scheme": "background-2",
"color_scheme": "background-2",
"image_behavior": "none",
"mobile_content_alignment": "left",
"padding_top": 0,
"padding_bottom": 20
}

[shahrozbabar5]

Please undo the changes you made. and share the store link and code for collaborate access

[JGTQM2018]

1194

https://admin.shopify.com/store/jvctvau

https://admin.shopify.com/store/jvctvau/themes/162690597168/editor?previewPath=%2Fproducts%2Fjvc-hom...