CSS Image Hover Overlays — CSS interactive lesson

Flip an Image

Move your mouse over the image to flip it horizontally:

Example

Formatted code

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

Live preview

Responsive Image Gallery

CSS can be used to create responsive image galleries. This example uses media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

Example

Formatted code

@media only screen and (max-width: 768px) {
  div.gallery-item {
    width: calc(50% - 20px);
  }
}
@media only screen and (max-width: 480px) {
  div.gallery-item {
    width: calc(100% - 20px);
  }
}

Live preview

Tip

Read more about Responsive Web Design in our CSS RWD Tutorial .