CSS Intérieur des Frontières de l'Image sur le vol Stationnaire

Été la recherche de haute et basse et bien qu'il existe beaucoup de fantaisie effets de survol, j'ai été en espérant avoir quelque chose de simple que je pourrais appliquer à des images dans une galerie qui vient de mettre un 10px large, 40% de transparence.

De nombreux a montré comment faire quelque chose de similaire pour l'image mais je veux juste une classe, je peux céder en cas de besoin.

Pour être juste, certains de ces plugins n'ont cette option, mais ils sont venus avec 50 autres qui semble exagéré.

Je pense que la solution pour cela est différent de celui figurant comme en double possible et fonctionne très bien pour moi alors que l'autre n'a pas.

OriginalL'auteur kylebellamy | 2015-04-28

5

Vous pouvez utiliser un encart box-shadow par exemple

http://codepen.io/anon/pen/qdEJGj

Balisage
```
<figure>
  <img src="http://lorempixel.com/300/300/nature/" />
</figure>
```
CSS
```
figure {
    display: inline-block;
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .4);
}

figure img {
    display: block;
    position: relative;
    z-index: -1;
}
```
Si vous avez besoin d'avoir cet effet sur hover vous pouvez également utiliser un transition, par exemple
```
figure {
    display: inline-block;
    box-shadow: inset 0 0 0 10px rgba(255,255,255, 0);
    transition: all .5s 0s;
}

figure:hover {
    box-shadow: inset 0 0 0 10px rgba(255,255,255, .4);
}

figure img {
    display: block;
    position: relative;
    z-index: -1;
}
```
Pour la bordure j'ai défini une couleur blanche avec un 40% opacité. L'image est négative z-index de sorte que le médaillon de l'ombre appliquée à la figure élément peut être visible (bien sûr, n'hésitez pas à utiliser un autre élément wrapper, si vous avez besoin d')

Résultat

J'aime la transition pour cela, mais je voulais le faire dans une classe comme celle-ci donc j'ai choisi comme la solution. Excellent travail sur ce bien, je l'apprécie vraiment!

OriginalL'auteur fcalderan

Vous devez vous connecter pour publier un commentaire.