Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Image Hover Overlays?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___: scaleX(-1);3Order
Put the learning moves in the order that makes the concept easiest to apply.
CSS can be used to create responsive image galleries.
Move your mouse over the image to flip it horizontally:
Responsive Image Gallery
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 .