CSS Stilizarea imaginilor. Suprapunere de imagini în curs. Rotiți o imagine. Galerie de imagini responsive.

Suprapunere de imagini în curs (Image Hover Overlay)

Creați un efect de suprapunere asupra hover.

Rotiți o imagine (Flip an Image)

Mutați mouse-ul peste imagine.

Exemplu:

img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

Galerie de imagini responsive

CSS poate fi utilizat pentru a crea galerii de imagini. Acest exemplu utilizează interogări media pentru a reorganiza imaginile pe dimensiuni de ecran diferite. Redimensionați fereastra browserului pentru a vedea efectul:



Exemplu:

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}