The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Image slider arrow background

  • # July 30, 2014 at 12:23 pm


    I’m working on an image slider. For the arrows I want their background a bit blured (when hovering) and transparent just like here:

    I can’t figure out how to do this. I’ve tried a lot of things such as gradient,opacity,masking etc…

    # July 30, 2014 at 12:34 pm

    Looks like an icon font in an absolutely positioned paragraph with an opacity gradient backgroound.

    # July 30, 2014 at 12:45 pm


    I’ve tried the gradient but not. Some kind of shadow maybe?

    # July 30, 2014 at 1:23 pm

    I’ve tried the gradient but not.

    Not sure what that means…what have you tried….can you show us?

    Something like this? –

    # July 30, 2014 at 1:34 pm

    Yes, the same, but how can i make it transparent to see above the images while sliding?

    # July 30, 2014 at 1:53 pm

    It is transparent…

Viewing 6 posts - 1 through 6 (of 6 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