Fluid image with shadow

Topic: 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!

Add comment

Marta Szymanska staff pro premium answered 7 years ago

1 0 Best answer

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.

Add comment

Write

Create snippet

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

About author

vgs

Pro User

55Support score
8Questions 5Answers

0Snippets likes 0Snippets