Hover Overlays

Image Hover Overlay

Create an overlay effect on hover:

Example

Fade in text:

<img src="/w3css/img_avatar3.png" alt="Avatar" class="imagefade">

Hello World

Example

Fade in a box:

<img src="/w3css/img_avatar3.png" alt="Avatar" class="imageopac" style="width:100%">

John

Example

Slide in (top):

<img src="/w3css/img_avatar3.png" alt="Avatar" class="imageslidetop">

Hello World

Example

Slide in (bottom):

<img src="/w3css/img_avatar3.png" alt="Avatar" class="imageslidebottom">

Hello World

Example

Slide in (left):

<img src="/w3css/img_avatar3.png" alt="Avatar" class="imageslideleft">

Hello World

Example

Slide in (right):

<img src="/w3css/img_avatar3.png" alt="Avatar" class="imageslideright">

Hello World

Flip an Image

Move your mouse over the image to flip it horizontally:

<img src="paris.jpg" class="flipimg" alt="Paris" style="width:40%;min-width:300px;">

Example

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

@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 our CSS RWD Tutorial.