CSS Stilizarea imaginilor. Suprapunere de imagini în curs. Rotiți o imagine. Galerie de imagini responsive.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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%;
}
}