Issue
I have a background to which I have applied filter: blur (5px); I like the effect I got. However I wish the border wasn't so blurry. So I followed this question How to remove white border from blur background image but I can't take it off, can anyone give me a suggestion on how to do it? I appreciate any response, thanks.
.main_container {
position:relative;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
border-radius: 6px;
}
.left_container {
width: 70%;
}
.right_container {
width: 30%;
border-radius: 0px 6px 6px 0px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box_left {
width: 70%;
margin: 20px;
display: flex;
flex-direction: column;
}
.box_right {
width: 80%;
padding: 20px;
z-index: 999;
position: relative;
}
img.attachment-full.size-full {
border-radius: 6px;
box-shadow: rgb(0 0 0 / 50%) 0px 5px 10px -5px;
}
.prd-img {
display: block;
background-size: cover;
background-repeat: no-repeat;
height:300px;
width:100%;
border-radius: 6px;
}
.blured-img{
background-size: cover;
background-repeat: no-repeat;
position:absolute;
top:0;
height:100%;
width:100%;
filter:blur(5px);
}
<div class="main_container">
<div class="left_container">
<div class="box_left"><!-- Head Box Thankyou Page -->
<h1>Some title here</h1>
<p class="info-post-purchuase t2-light">
Some text here
</p>
</div>
</div>
<div class="right_container">
<div class="box_right">
<div class="prd-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
</div>
<div class="blured-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
</div>
</div>
Solution
Just set overflow: hidden
to .right_container
.main_container {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
border-radius: 6px;
}
.left_container {
width: 70%;
}
.right_container {
width: 30%;
border-radius: 0px 6px 6px 0px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.box_left {
width: 70%;
margin: 20px;
display: flex;
flex-direction: column;
}
.box_right {
width: 80%;
padding: 20px;
z-index: 999;
position: relative;
}
img.attachment-full.size-full {
border-radius: 6px;
box-shadow: rgb(0 0 0 / 50%) 0px 5px 10px -5px;
}
.prd-img {
display: block;
background-size: cover;
background-repeat: no-repeat;
height: 300px;
width: 100%;
border-radius: 6px;
}
.blured-img {
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
height: 100%;
width: 100%;
filter: blur(5px);
}
<div class="main_container">
<div class="left_container">
<div class="box_left">
<!-- Head Box Thankyou Page -->
<h1>Some title here</h1>
<p class="info-post-purchuase t2-light">
Some text here
</p>
</div>
</div>
<div class="right_container">
<div class="box_right">
<div class="prd-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
</div>
<div class="blured-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
</div>
</div>
Answered By - Kunal Tanwar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.