How to set box shadow bottom when parent div is overflow hidden?
Hello guys I want box shadow without div structure changes I was try to set box shadow in content column but I set to overflow hidden in advantages-box div because also I want on hover background image div scale on main dive hover when I remove overflow hidden CSS than background image dive show out of the main div so I set to overflow hidden. that is possible shadow when you remove overflow hidden than show shadow but my background image scale effect is showing bad. What is the solution for this type of issues
.features-box {
padding: 100px 0;
background-color: rgba(56,74,100,.1);
}
.content {
padding: 30px;
background-color: #fff;
position: relative;
}
.content:after {
content: '';
position: absolute;
width: 100%;
bottom: 0;
height: 2px;
left: 0;
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
-ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
z-index: 9;
}
.advantages-box {
overflow: hidden;
}
.advantages-box .left {
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}
.advantages-box:hover .left {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 advantages-box">
<div class="row h-100">
<div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
</div>
<div class="col-6 h-100 p-0 position-relative right">
<div class="content d-flex flex-column align-items-start text-left h-100">
<h5>What is Lorem Ipsum one?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<h5>What is Lorem Ipsum two?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Solution 1:
Make the image an extra element and you only need to apply overflow on its parent:
.features-box {
padding: 100px 0;
background-color: rgba(56, 74, 100, .1);
}
.content {
padding: 30px;
background-color: #fff;
position: relative;
}
.content:after {
content: '';
position: absolute;
width: 100%;
bottom: 0;
height: 2px;
left: 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
z-index: 9;
}
.advantages-box .left {
overflow: hidden;
}
.advantages-box .left img {
height: 100%;
width: 100%;
object-fit: none;
transition: .3s;
}
.advantages-box:hover .left img {
transform: scale(1.1);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 advantages-box">
<div class="row h-100">
<div class="col-6 h-100 p-0 position-relative left">
<img src="http://placekitten.com/1000/500">
</div>
<div class="col-6 h-100 p-0 position-relative right">
<div class="content d-flex flex-column align-items-start text-left h-100">
<h5>What is Lorem Ipsum one?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<h5>What is Lorem Ipsum two?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>If you want to keep the background image:
.features-box {
padding: 100px 0;
background-color: rgba(56, 74, 100, .1);
}
.content {
padding: 30px;
background-color: #fff;
position: relative;
}
.content:after {
content: '';
position: absolute;
width: 100%;
bottom: 0;
height: 2px;
left: 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
z-index: 9;
}
.advantages-box .left {
overflow: hidden;
}
.advantages-box .left div {
height:100%;
background-position:center;
background-repeat:no-repeat;
transition: .3s;
}
.advantages-box:hover .left div {
transform: scale(1.1);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 advantages-box">
<div class="row h-100">
<div class="col-6 h-100 p-0 position-relative left">
<div style="background-image:url(http://placekitten.com/1000/500)"></div>
</div>
<div class="col-6 h-100 p-0 position-relative right">
<div class="content d-flex flex-column align-items-start text-left h-100">
<h5>What is Lorem Ipsum one?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<h5>What is Lorem Ipsum two?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Another idea without changing the HTML is to rely on pseudo element and inheritance for the background:
.features-box {
padding: 100px 0;
background-color: rgba(56, 74, 100, .1);
}
.content {
padding: 30px;
background-color: #fff;
position: relative;
}
.content:after {
content: '';
position: absolute;
width: 100%;
bottom: 0;
height: 2px;
left: 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
z-index: 9;
}
.advantages-box .left {
overflow: hidden;
position:relative;
z-index:0;
}
.advantages-box .left:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:inherit;
transition: .3s;
}
.advantages-box:hover .left:before {
transform: scale(1.1);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 advantages-box">
<div class="row h-100">
<div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
</div>
<div class="col-6 h-100 p-0 position-relative right">
<div class="content d-flex flex-column align-items-start text-left h-100">
<h5>What is Lorem Ipsum one?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<h5>What is Lorem Ipsum two?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Solution 2:
You can't! Overflow hidden means overflow hidden. You must restructure your HTML
.features-box {
padding: 100px 0;
background-color: rgba(56, 74, 100, .1);
}
.content {
padding: 30px;
background-color: #fff;
position: relative;
}
.content:after {
content: '';
position: absolute;
width: 100%;
bottom: 0;
height: 2px;
left: 0;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
-ms-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
z-index: 9;
}
.advantages-box .image-wrapper {
overflow: hidden;
display: flex;
align-items: stretch;
justify-content: stretch;
}
.advantages-box .image {
-webkit-transition: transform .3s;
-moz-transition: transform .3s;
-ms-transition: transform .3s;
transition: transform .3s;
}
.advantages-box:hover .image {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 advantages-box">
<div class="row h-100">
<div class="col-6 p-0 position-relative image-wrapper">
<div class="image h-100 w-100 " style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">A</div>
</div>
<div class="col-6 h-100 p-0 position-relative right">
<div class="content d-flex flex-column align-items-start text-left h-100">
<h5>What is Lorem Ipsum one?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<h5>What is Lorem Ipsum two?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>