Issue
I'm trying to blur the background image by keeping it left aligned with the main_container. I was suggested to follow this post How to apply a CSS filter to a background image and I figured out how to blur the background image without that covers everything. But then I can't align it to the main_container, can someone help me figure out what am I wrong?
I must necessarily keep the background inside the html because in reality the url is a php variable that I could not put in the style sheet. The way I tried to align the main_container left doesn't work from the moment the page changes size. Also the right_container should have the same width as the box_right.
This is how I would like it to be aligned, but if I then blur, the blur covers everything.
.main_container {
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
padding: 20px;
border-radius: 6px;
background: #f5f5f5;
border: 1px solid blue;
margin: 20px;
}
.prdimg {
border: 1px solid blue;
height: 80vh;
width: 300px;
background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.left_container {
width: 70%;
}
.box_left {
width: 70%;
display: flex;
flex-direction: column;
}
.right_container {
width: 30%;
margin: -20px;
padding: 20px;
border-radius: 0px 6px 6px 0px;
position: relative;
}
.box_right {
width: 30%;
padding: 20px;
z-index: 999;
}
<div class="main_container">
<div class="left_container">
<div class="box_left">
<h1>Some title here!</h1>
<p class="info-post-purchuase t2-light">
Some thext here
</p>
</div>
</div>
<div class="right_container" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'>
<div class="box_right">
<div class="prdimg"></div>
</div>
</div>
</div>
This is what I am trying to do
.main_container {
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
padding: 20px;
border-radius: 6px;
background: #f5f5f5;
border: 1px solid blue;
margin: 20px;
}
.prdimg {
border: 1px solid blue;
height: 100vh;
width: 100vh;
background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.left_container {
width: 70%;
}
.box_left {
width: 70%;
display: flex;
flex-direction: column;
}
.right_container {
width: 30%;
margin: -20px;
padding: 20px;
border-radius: 0px 6px 6px 0px;
filter: blur(5px);
position: relative;
right: -240px;
background-size: cover;
background-repeat: no-repeat;
}
.box_right {
width: 30%;
padding: 20px;
z-index: 999;
}
<div class="main_container">
<div class="left_container">
<div class="box_left">
<h1>Some title Here!</h1>
<p class="info-post-purchuase t2-light">
Some thext here
</p>
</div>
</div>
<div class="right_container" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'> </div>
<div class="box_right">
<div class="prdimg"></div>
</div>
</div>
Solution
something like this ?
.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;
background: #f5f5f5;
border: 1px solid blue;
}
.left_container {
width: 60%;
}
.box_left {
width: 70%;
margin:20px;
display: flex;
flex-direction: column;
}
.right_container {
width: 40%;
border-radius: 0px 6px 6px 0px;
position: relative;
}
.box_right {
width: 30%;
padding: 20px;
z-index: 999;
position: relative;
}
.prdimg {
border: 1px solid blue;
width: 10rem;
height: 15rem;
background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.blured-img{
background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");
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">
<h1>Some title Here!</h1>
<p class="info-post-purchuase t2-light">
Some thext here
</p>
</div>
</div>
<div class="right_container">
<div class="box_right">
<div class="prdimg"></div>
</div>
<div class="blured-img">
</div>
</div>
</div>
Answered By - H-DC
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.