Nic727 Posted July 22, 2018 Share Posted July 22, 2018 Hi, So I have a div containing a link containing an image and a filter, but I'm unable to hide part of the child elements. <div class="ex-story"> <a title="Link to Indonesia: Responsible palm oil production by WWF" class="ex-stoy-link" href="https://wwf.exposure.co/indonesia-responsible-palm-oil-production" target="_blank" rel="noopener noreferrer"> <div class="ex-story-img" style="background-image:url(https://exposure.imgix.net/production/posts/297733/cover-photo/cover-1530781336.JPG?w=1200&q=50&sharp=10&fit=crop&fm=pjpg&auto=format)"> <div class="bg-filter"></div> </div> </a> </div> .ex-story{ width:100%; height:250px; margin-bottom:10px; border-radius:20px; overflow:hidden; position:relative; } .ex-stoy-link{ text-decoration:none; color:white; } .ex-story-img{ width:auto; height:100%; background-position: center; background-size: cover; position:relative; background-attachment: fixed; } .bg-filter{ position:absolute; width:100%; height:100%; background-color:black; opacity:0.4; transition:opacity 0.2s; } .ex-stoy-link:hover .bg-filter{ opacity:0.2; -webkit-backdrop-filter: blur(3px); } I'm trying to make my block a bit circular. It looks like a new trend… The problem is that I added border-radius 20px and overflow hidden to the parent element, but I still see a rectangular shape. Thank you Link to comment Share on other sites More sharing options...
Ingolme Posted July 22, 2018 Share Posted July 22, 2018 I tested the code you provided and it works. The only problem I found with it, which might just be because of how it was pasted in the post, is that there are some strange invisible Unicode characters right in this part of the code at the end of the "width:auto" line. .ex-story-img{ width:auto; height:100%; Try deleting and then manually typing in these three lines manually into your CSS and see if that fixes the issue. If that does not fix it, then it means there are other styles interfering that you have now shown here. Link to comment Share on other sites More sharing options...
Nic727 Posted July 22, 2018 Author Share Posted July 22, 2018 (edited) I found that background-attachment fixed remove my border-radius. If I remove the attachment of the image, border-radius is showing up, but I don't have the effect I wanted on image… What I have: http://image.noelshack.com/fichiers/2018/29/7/1532288938-1.png What I want with fixed background image: http://image.noelshack.com/fichiers/2018/29/7/1532288938-2.png Edited July 22, 2018 by Nic727 Link to comment Share on other sites More sharing options...
Ingolme Posted July 22, 2018 Share Posted July 22, 2018 The code you provided is doing just that. I am not experiencing any issues in any of the browsers I tested. Link to comment Share on other sites More sharing options...
Nic727 Posted July 22, 2018 Author Share Posted July 22, 2018 (edited) weird… I will try to clear my browser cache and see if it helps. ------ EDIT: Not working… Maybe something else... I tried in codepen https://codepen.io/anon/pen/wxJWxG It works when loading the page, but if you make the window smaller to get a scrollbar and activate the fixed attachment, it goes back to rectangular shape. I added a border-color and it looks like my image just doesn't care of the overflow hidden. EDIT 2: Well… If nothing works, I will just keep a mixed design between round and rectangle. - Round : Buttons, main album image on the album page and textarea to type message. - Rectangle : Blog images and images inside albums Edited July 22, 2018 by Nic727 Link to comment Share on other sites More sharing options...
Ingolme Posted July 22, 2018 Share Posted July 22, 2018 Your codepen example is working correctly in Firefox, Chrome and Internet Explorer. What browser are you testing in? Link to comment Share on other sites More sharing options...
Nic727 Posted July 22, 2018 Author Share Posted July 22, 2018 27 minutes ago, Ingolme said: Your codepen example is working correctly in Firefox, Chrome and Internet Explorer. What browser are you testing in? Edge. Link to comment Share on other sites More sharing options...
Nic727 Posted July 23, 2018 Author Share Posted July 23, 2018 Ok it looks like it's a bug with Edge. I will report that to Edge devs to fixe this. Link to comment Share on other sites More sharing options...
Nic727 Posted December 24, 2018 Author Share Posted December 24, 2018 (edited) Just wanted to update this a bit since I just started to work on my website again after a break and I tried to use that for something else. I use backdrop-filter blur for a nice hover effect. The thing is that for some reason, the blur (1px) effect is adding 0.5px to my margin which I need to correct. It's very weird. Blur should stop right where you put it no? Whatever, I think my problem got fixed in Edge update. The only weird thing is aliasing around the corner which make a little artifact on the corner. Edited December 24, 2018 by Nic727 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now