Transparent gradient over image

[danielpox]

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

[Paulie_D]

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.

[danielpox]

Oh sorry xD

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

[danielpox]

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

[Author]

Posts