comment appliquer un style à une image

Question

Sur cette page, j'ai une image avec un effet brillant dans une div sous l'image.

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

Je veux essentiellement de déplacer l'effet brillant sur le dessus de l'image. J'ai essayé

1) en ajoutant le style directement à la balise img, aucun effet 2) la création d'un div autour de l'image, mettre la div brillante en elle (mais le div brillant a fini par être sous l'image)

D'autres pensées?

Answer 1

Est-ce quelque chose comme ceci que vous cherchez à atteindre?

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: ''; 
} 

Si vous n'avez pas besoin de la balise img et vous pouvez avoir l'image comme une image d'arrière-plan, il devient plus facile. Un seul élément:

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

et juste ce 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; 
} 

Answer 2

Vous pouvez essayer d'utiliser le positionnement absolu pour la div poser au-dessus de l'image. Vous aurez besoin d'utiliser z-index pour superposer correctement. Essayez quelque chose comme ceci:

.imageClass 
{ 
    z-index: 1; 
} 

.glossyDiv 
{ 
    position: absolute; 
    top: 999px; 
    left: 999px; 
    z-index: 5; 
    /* you'll need to figure out where your image sits in relation to the 
    top and left of the screen, replace the 999s with the correct values */ 
} 

Cela devrait obtenir le div sur l'image. Vous pouvez modifier cela pour que le div soit positionné par rapport à son conteneur si c'est comme ça que vous avez configuré votre HTML. L'index z contrôle la manière dont les éléments sont superposés/superposés. Par conséquent, si vous définissez le div sur un index plus élevé, il se rapprochera du «devant» de l'écran et les nombres inférieurs l'affecteront à l'arrière. Notez que z-index ne fonctionnera que sur les éléments "positionnés" source