Jump to content
Sign in to follow this  
Nic727

overflow hidden doesn't work.

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

The code you provided is doing just that. I am not experiencing any issues in any of the browsers I tested.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Your codepen example is working correctly in Firefox, Chrome and Internet Explorer. What browser are you testing in?

Share this post


Link to post
Share on other sites
27 minutes ago, Ingolme said:

Your codepen example is working correctly in Firefox, Chrome and Internet Explorer. What browser are you testing in?

Edge.

Share this post


Link to post
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
Sign in to follow this  

×