Image Hover Overlay
Create an overlay effect on hover:
Example
Fade in text:
Hello World
Example
Fade in a box:
John
Example
Slide in (top):
Hello World
Example
Slide in (bottom):
Hello World
Example
Slide in (left):
Hello World
Example
Slide in (right):
Hello World
Flip an Image
Move your mouse over the image to flip it horizontally:
Example
css
img:hover {
transform: scaleX(-1);
}
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:
- Cinque Terre
- Green Forest
- Northern Lights
- Mountains
Example
css
@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);
}
}
Tip: Read more about Responsive Web Design in the CSS RWD Tutorial.