Question

On this page, I have an image with a glossy effect in a div below the image.

http://www.joelin.org/home2.html

I basically want to move the glossy effect on top of the image. I tried

1) adding the style directly to the img tag, no effect
2) creating a div around the image, putting the glossy div in it (but the glossy div ended up being below the image)

any other thoughts?

Answer 1

Is it something like this http://dabblet.com/gist/3610138 that you’re looking to achieve?

HTML:

<a href='#' class='img-wrapper'>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
</a>

CSS:

.img-wrapper, .img-wrapper img {
    display: inline-block;
    position: relative;
    width: 13em;
    height: 8em;
    border-radius: 1em;
}
.img-wrapper:after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 1em;
    box-shadow: inset 0 1em 0 0 rgba(192, 192, 192, .5);
    pointer-events: none; /* so that you can get image from right-click menu
                                won't work in IE and Opera */
    content: '';
}

If you don’t need the img tag and you can have the image as a background image, then it gets easier. Just one element:

<div class='glossy'></div>

and just this CSS:

.glossy {
    width: 13em;
    height: 8em;
    border-radius: 1em;
    background: linear-gradient(rgba(192, 192, 192, .5) 12.5%, transparent 12.5%),
        radial-gradient(100% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
            no-repeat 0 1em,
        radial-gradient(0% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
            no-repeat 100% 1em,
        url(http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg);
    background-size: 1px 100%, 1em 1em, 1em 1em, cover;
}