背景图像边框半径 - 白角

Question

I was trying to create Tilt effect on Hover with CSS and JS. I have used Vanilla Tilt JS Library and that works well.

After I wanted to add bottom shadow to images that needs to be tilted on hover, but I have problem with white corners. Images are rounded with border-radius and when I hover bottom corner white color is between image and shadow.

Problem:

My Code

 .card-container { width: 260px; height: 380px; background-position: 50% center; background-size: cover; border-radius: 15px; } .card-container:hover:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; box-shadow: 0 20px 70px -30px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2); z-index: 10; -webkit-transform: translateZ(-50px); transform: translateZ(-50px); -webkit-transition: .3s; transition: .3s; }

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-md-4 text-center"> <!-- One Card Code --> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-3-944x720-54a0ac93e369fd0ee577012df4f1dcd5da67c281.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> <!-- One Card Code END --> </div> <div class="col-md-4 text-center"> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-2-944x720-e9951a49084478d378346e46bdb026c0b989a479.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> </div> <div class="col-md-4 text-center"> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-944x720-d7a738407387149cc4e941dd18e9486a0c89bb51.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>

Can someone give me a hint how to fix this?

I have tried to set overflow to none , but it removes shadow. Also I have tried to "resize" shadow, but it also doesn't helps.

Answer 1

make the shadow on .card-container and you can apply overflow:hidden :

 .card-container { width: 260px; height: 380px; background-position: 50% center; background-size: cover; border-radius: 15px; overflow:hidden; } .card-container:hover { box-shadow: 0 20px 70px -30px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2); transition: .3s; }

 <div class="container"> <div class="row"> <div class="col-md-4 text-center"> <!-- One Card Code --> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-3-944x720-54a0ac93e369fd0ee577012df4f1dcd5da67c281.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> <!-- One Card Code END --> </div> <div class="col-md-4 text-center"> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-2-944x720-e9951a49084478d378346e46bdb026c0b989a479.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> </div> <div class="col-md-4 text-center"> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-944x720-d7a738407387149cc4e941dd18e9486a0c89bb51.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>

Answer 2

 .card-container { width: 260px; height: 380px; background-position: 50% center; background-size: cover; border-radius: 15px; overflow: hidden; } .card-container:hover { box-shadow: 0 20px 70px -30px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2); z-index: 10; -webkit-transform: translateZ(-50px); transform: translateZ(-50px); -webkit-transition: .3s; transition: .3s; } .card-container:hover:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

 <div class="container"> <div class="row"> <div class="col-md-4 text-center"> <!-- One Card Code --> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-3-944x720-54a0ac93e369fd0ee577012df4f1dcd5da67c281.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> <!-- One Card Code END --> </div> <div class="col-md-4 text-center"> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-2-944x720-e9951a49084478d378346e46bdb026c0b989a479.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> </div> <div class="col-md-4 text-center"> <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-944x720-d7a738407387149cc4e941dd18e9486a0c89bb51.jpg);" data-tilt="" data-tilt-glare="true" data-tilt-max-glare="0.5" data-tilt-speed="400" data-tilt-scale="1.08" data-tilt-max="40" data-tilt-perspective="500" style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); "></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>