Jump to content

overflow hidden doesn't work.


Nic727

Recommended Posts

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&amp;q=50&amp;sharp=10&amp;fit=crop&amp;fm=pjpg&amp;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

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

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 by Nic727
Link to comment
Share on other sites

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.

1532290587-2.png
 

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 by Nic727
Link to comment
Share on other sites

  • 5 months later...

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.

1545611853-dasd.png

Edited by Nic727
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...