Simple Image On-Hover Transitions

I’ve compiled a few simple on-hover CSS transitions / effects to make your website more interesting, enjoy!

Grayscale On-Hover

CSS

img { 
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%); 
}
img:hover { 
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
}

---

Opacity On-Hover

CSS

img { 
  opacity: 1; 
}
img:hover { 
  opacity: .75;
}

---

Zoom On-Hover 1

CSS

img:hover { 
  transform: scale(1.25);
}

HTML

<img src="image.jpg" alt="">

---

Zoom On-Hover 2

CSS

img:hover { 
  transform: scale(1.25);
}
figure { 
  overflow:hidden;
}

HTML

<figure>
  <img src="image.jpg">
</figure>

---

Change Image On-Hover

This works great on responsive websites, I normally use this on CTAs.

CSS

a { 
  position: relative;
  display: block;
 }
a > img { 
  -webkit-transition: opacity .5s linear; 
  -moz-transition: opacity .5s linear; 
  -ms-transition: opacity .5s linear; 
  -o-transition: opacity .5s linear; 
  transition: opacity .5s linear;
}
img.default { 
  position: relative;
  opacity: 1;
}
img.hover { 
  position: absolute;
  top: 0;
}
a:hover img.default { 
  opacity: 0;
}
a:hover img.hover {
  opacity: 1;
}

HTML

<a href="#">
  <img src="image-1.jpg" class="default" alt="">
  <img src="image-2.jpg" class="hover" alt="">
</a>

Here’s the default css transition used for everything except the on-hover one:

img { 
  -webkit-transition: all .4s ease-out; 
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out; 
  cursor: pointer; 
}