CSS - Images

IMAGES

Opacité

img-opacity-max
& img-hover-none
img-opacity
& img-hover-none
img-hover-opacity

Niveau de gris

img-grey & img-hover-none
img-grey-min & img-hover-none
img-hover-grey

Sépia

img-sepia & img-hover-none
img-sepia-min & img-hover-none
img-hover-sepia

Marges autour

Effet polaroid simple.
<img 
 class="img-polaroid rotate3"
 src="images.jpg"
>
Effet polaroid avec titre
<a 
  class="polaroid" 
  alt="Démo classe polaroid"
>
  <img 
    src="images.jpg"
  >
</a>

note: si les images sont dans une flexbox, ne pas utiliser le remplissage vertical (stretch ou fg-vfill)

Autres classes utilisables sur les images

Arrondis

<img class="bd-rond" src="..."/>
.bd-rond
.bd-arrondi
<img class="bd-arrondi" src="..."/>

Rotation

Rotation à -3°
<img class="rotate3" src="..."/>

Rotation à -3°
<img class="rotate3" src="..."/>

Rotation à 3°
<img class="rotate3" src="..."/>

Rotation à 6°
<img class="rotate6" src="..."/>

Rotation à 45°
<img class="rotate45" src="..."/>

Rotation à 90°
<img class="rotate90" src="..."/>

Détails