Question

does anybody know if there’s a way to create an CSS effect which looks like the light effect used for iPhone apps? I mean the upper, brighter part of the box.

Thanks,

Ron

Answer 1

Unfortunately since using :after and :before selectors on img elements is not covered by the specification, a pure CSS solution might not behave correctly:

This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML). This will be
defined in more detail in a future specification.

In the current versions of Chrome and Firefox, these selectors appear to be ignored and simply don’t work on img elements.

Here’s a solution with a small HTML wrapper that will fall back to not rendering when the CSS isn’t supported. The container size needs to be specified here, but that could easily be set with JavaScript.

CSS

.shine {
    width:223px;
    height:223px;
    position:relative;
    overflow:hidden;
    display:inline-block;
}

.shine:after {
    width:150%;
    height:100%;
    position:absolute;
    top:-45%;
    left:-25%;
    display:block;
    content:"";
    background:rgba(255,255,255,0.1);
    border-radius:100%;
}

HTML

<span class="shine">
    <img src="" alt="">
</span>

Result

To make this a little fancier, you could add a gradient background to .shine:after, but it works fine without to demonstrate the idea.

Here’s a jsFiddle so you don’t have to take my word for it.