search

creativetimofficial / ct-soft-ui-design-system-pro

Soft UI Design System PRO - Premium Bootstrap 5 UI kit
https://www.creative-tim.com/product/soft-ui-design-system-pro
16 stars 2 forks source link

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

Closed brunoamaral closed 8 months ago

brunoamaral commented 8 months ago

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 commented 8 months ago

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