overflow:transparent / overflow with opacity

  • # February 23, 2013 at 11:36 am

    I’ve been looking for a way to give overflow some transparency in a responsive layout. So far this is the only method I’ve found, and I haven’t been able to get it to work: http://stackoverflow.com/questions/7701055/transparent-image-mask-on-css-overflow

    My specific situation is I have an image that’s going to be positioned via margin-left so it hangs slightly outside of a sidebar, and I’d like the part that hangs outside to have an opacity of .5.

    Can anyone think of a better way to do this? Thanks!


    # February 23, 2013 at 12:48 pm

    It’s a little hacky (at least to me)…http://codepen.io/Paulie-D/pen/pIzHl

    # February 24, 2013 at 5:39 am

    What @Paulie_D did. With or without pseudo-element though. You could apply the background-image to the div.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed