Grow your CSS skills. Land your dream job.

Transparent gradient over image

  • # September 8, 2012 at 2:29 pm

    Hi!

    I’m trying to get this Apple iPhone reflection effect to my site, but I also want an image “behind” the reflection.
    I also want this reflection to fade away in a specific angle but the reflection doesn’t even show.

    Code:


    background-image: url(http://voxorn.com/iphone5thoughts/img/ios6_wallpaper.png) no-repeat center center,
    -webkit-linear-gradient(15deg, #000 80%,rgba(255, 255, 255, 0.3) 80%);

    Codepen: http://codepen.io/danielpox/pen/mbKLv

    The site

    # September 8, 2012 at 2:57 pm

    Please put your HTML / CSS in Codepen. It will let us play with it.

    You will have to have the images on a live webserver so we can view them. I use Photobucket but if you have a live site that will work as well.

    # September 8, 2012 at 3:00 pm

    Oh sorry xD

    This is the path: “url(http://www.voxorn.com/iphone5thoughts/img/ios6_wallpaper.png)”

    # September 8, 2012 at 3:13 pm

    Here’s the codepen: http://codepen.io/danielpox/pen/mbKLv

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".