I am trying to achieve an effect, where I will have div with background image with content inside. This content should be flex-positioned div with the same image but blurred (while keeping its relative position to parent).
In search for salvation, I have discovered that certain combination of CSS rules make this exact effect, but only in Chrome.
.container {
width: 320px;
height: 240px;
position: relative; /* it is required */
display: flex; /* it is required */
background: url(https://loremflickr.com/cache/resized/4848_46406748211_5572c760e0_320_240_nofilter.jpg);
}
.mask {
z-index: 1; /* it is required */
overflow: hidden; /* it is required */
width: 150px;
height: 150px;
border-radius: 1px; /* it is required */
}
.element {
background: url(https://loremflickr.com/cache/resized/4848_46406748211_5572c760e0_320_240_nofilter.jpg);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
filter: blur(5px);
}
<div class="container">
<div class="mask">
<div class="element"></div>
</div>
</div>
https://jsfiddle.net/39um580g/16/
This is ridiculous. Is there a way I can make this solution cross-browser?
Let's suppose my block is placed on the right side. Current behavior of Chrome version is as I desire:
Adding any kind of transform will make .mask
relative, so it will destroy desired effect:
Adding clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0);
clips your mask.
.mask {
z-index: 1; /* it is required */
overflow: hidden; /* it is required */
width: 150px;
height: 150px;
border-radius: 1px; /* it is required */
clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0); /* Fix for Firefox*/
}
One solution is to make the mask element position:absolute
so that the overflow will work as expected then you consider adjusting the background-position
while adjust the position of the element to rectify the image position.
I used CSS variable to make it easy to adjust:
.container { width: 320px; height: 240px; position: relative; display: flex; --img:url(https://loremflickr.com/cache/resized/4848_46406748211_5572c760e0_320_240_nofilter.jpg); background:var(--img); } .mask { z-index: 1; overflow: hidden; width: 150px; height: 150px; top:var(--t,0); left:var(--l,0); position:absolute; border-radius: 50px; } .mask::before { content:""; display:block; background:var(--img) calc(-1*var(--l)) calc(-1*var(--t)); width:100%; height:100%; filter: blur(5px); }
<div class="container" style="--t:20px;--l:80px"> <div class="mask"> </div> </div> <div class="container" style="--t:90px;--l:0px"> <div class="mask"> </div> </div> <div class="container" style="--t:50px;--l:50px;--img:url(https://picsum.photos/320/240?image=1069)"> <div class="mask"> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.