Fluid image with shadow

vgs pro asked 7 years ago

Hello,

I have a fluid image width shadow and a wave effect on click (which toggles the image source).

<div class="view overlay hm-white-slight z-depth-1-half">
<img src="https://mdbcdn.b-cdn.net/img/index_sample0A.jpg" class="img-fluid" style="margin: 0 auto" alt="">
<div class="mask waves-effect waves-light" onclick="toggleSample(0)"></div>
</div>

This works fine only when the screen width is smaller than the image width. But if the screen is wider than the native image pixel width, the shadow box stays at the screen width, and only the image is centered within this shadow box. I than have a screenwide shadowbox with a centered image within.

sample

How is it possible to center the whole thing so that the shadow always has exactly the same size as the image and does not get wider than the native image pixel width?

Thanks!


Marta Szymanska staff pro premium answered 7 years ago

Hi, try this code, it works:
<div class="d-flex justify-content-center">
 <div class="view overlay hm-white-slight z-depth-1-half d-inline-block">
  <img src="https://mdbootstrap.com/img/Others/mdb-about2.jpg" class="img-fluid" style="margin: 0 auto" alt="">
  <div class="mask waves-effect waves-light" onclick="toggleSample(0)"></div>
 </div>
</div>
Best, Marta

vgs pro commented 7 years ago

Awesome, this works. Thanks a lot!

Marta Szymanska staff pro premium commented 7 years ago

I'm glad I could help you.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No