[Bug] how to use the colored shadow options for images

[brunoamaral]

Version

1.1.1

Reproduction link

https://brunoamaral.eu/tests/

Operating System

MacOS

Device

Macbook

Browser & Version

sonoma

Steps to reproduce

1. tried to reproduce the example seen on case study example the https://demos.creative-tim.com/soft-ui-design-system-pro/pages/case-study.html
2. In every combination of position-relative or position-absolute, the shadow drifts away

What is expected?

shadow below the image

What is actually happening?

shadow overflows

---

Solution

Additional comments

[groovemen]

Hello @brunoamaral,

Thank you for using our products, here is what you have to do for achieving the colored shadow. Your code structure should look like this:

<div class="col-md-6 position-relative ms-n4 mb-5 mt-8 d-md-block d-none">
  <div class="position-relative ms-md-5 me-md-n5">
    <div class="blur-shadow-image">
      <img class="image-left rounded-3 img-fluid position-relative top-0 end-0 bg-cover" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/laptop.jpg" alt="image" />
    </div>
  </div>
  <p class="blockquote border border-primary rounded w-50 p-3 text-sm text-primary float-md-end mx-auto mt-4 me-md-n2">
    Your text
  </p>
</div>

Hope this information helps you. Please let me know if we can help you with anything else.
All the best,
Stefan