Topic: Fluid image with shadow
vgs pro asked 5 years ago
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="/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.
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?
Marta Wierzbicka staff answered 5 years ago
<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 5 years agoAwesome, this works. Thanks a lot!
Marta Wierzbicka staff commented 5 years agoI'm glad I could help you.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No