Two Images Side by Side w/ text inside each image - Daw

[Ottodebac77]

Hey all, 

Apologies if this has been asked before. 

On Dawn theme is it possible to have two images side by side with a text box inside them? I'm attaching a screenshot of the desire effect

You can find my store here: https://88pyrt2m1v0dxrl1-6663602260.shopifypreview.com very much a work in progress. 

If it's not possible to add in vanilla version is there a way to add a new liquid file section to accomplish this? 

Thank you! 

[dmwwebartisan]

@Ottodebac77 

This is code customization work!

Thanks!

[Ottodebac77]

Got it, what actions should I take?

[Moeed]

Hey @Ottodebac77 

Yes, of course it is possible. It would require coding a custom section like that according to your requirements. If you're not familiar with coding then I suggest you to hire a Shopify developer for you who can perform this task as it's a task that is not only possible through CSS.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Small_Task_Help]

Hi,

Edit Code > Create a new section two-images-with-text.liquid > Add the HTML structure

<div class="two-images-with-text">
  <div class="image-box">
    <img src="{{ section.settings.image1 }}" alt="Image 1">
    <div class="text-box">
      <p>{{ section.settings.text1 }}</p>
    </div>
  </div>
  <div class="image-box">
    <img src="{{ section.settings.image2 }}" alt="Image 2">
    <div class="text-box">
      <p>{{ section.settings.text2 }}</p>
    </div>
  </div>
</div>

modify an existing CSS file in the "Assets" and add following code

.two-images-with-text {
  display: flex;
  justify-content: space-between;
}

.image-box {
  width: 45%; /* Adjust the width as needed */
  position: relative;
}

.image-box img {
  width: 100%;
  height: auto;
}

.text-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8); /* Adjust the background color as desired */
  padding: 10px;
}

Save> Preview and publish

If want you can contact us for help details given at signature 

[rabut1741]

Thanks, this is a great start. Where would I add in the photos to this code

[Adj2308]

Hiya, can you kindly expand on that? When I create a new liquid would that be in a the code and duplicate theme.liquid or would this be in the online store as a custom liquid? and can you specify where I would had the image? 

thank you!