20 Best Premium and Free Image Hover Effect Plugins

Share!

If you have a website or blog with images and graphics as the main elements of focus, rather than text, then you MUST have a cool image hover effect plugin installed, as hover effects will encourage your readers to click on the images on your website and thus increase your page views.

This is an excellent bundle of 20 premium and free image hover effect plugins which you can use for your websites. These great plugins come with beautiful image hover effects and various animations. They will definitely improve your website’s usability and attract the viewer’s attention.

You can choose between several image hover effects that add elements such as a title, subtitle, icons, caption, offset border, and more. Take a look at all of them, select your favorites, download and use them in your projects.

These will look stunning on photography websites, online portfolios, image galleries, or just about any website that uses lots of images. Any designer can use these neat plugins which will definitely come in handy at some point.

So, without further ado, we selected 20 premium and image hover effect plugins (mostly free), to help you add great image effects to your website. Here they are!

Simple Stack

Simple Stack Free Image Hover

This is a set of simple stack effects for inspiration. These kinds of effects are mostly used in image galleries, but also on single items on a page. Check them out and see how your website’s appearance improves immeasurably.

RD Hover Effects

RD Hover Effects

RD Hover Effects WordPress Plugin comes with some impressive hover effects which you can use on your images to improve the way your website looks and how your visitors interact with it. The image hovers effects powered by pure CSS3 and iHover comes with 92+ Different Hover Effects. Feel free to check it out and see if you find this plugin useful.

Follow the kitty

Follow the kitty Free Image Hover

This is a simple effect for rollover on grids, where the content slides based on the previous position. It is really nice and could definitely improve the way your website’s visitors interact with your website. Follow the Kitty is definitely a plugin worth taking a closer look at as it could rapidly improve your website’s design.

Portfolio Wall – premium

Portfolio Wall Free Image Hover

Portfolio Wall | Joomla module 2.x 3.x is a module to help you create a wall of your works with awesome 3d hover effects. Try it out and watch how your portfolio website improves.

CSS3 Transitions

css3 transitions

This is a great CSS3 transition hover effect, and it’s free too! It can add a fun dose to your website and can be used in many creative ways. You can easily add it to your website. This plugin might be exactly what your website was missing. Do not miss the chance to improve interaction on your website through an amazing plugin.

Dynamic Grid

Dynamic Grid Free Image Hover

This is a dynamic grid layout that lets you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends. Check out this amazing plugin and change the way visitors interact with your site.

Hover Effects Pack – premium

Hover Effects Pack

This hover effects pack plugin allows you to add an image via shortcode and set hover animation, text animation, and text delay. This plugin can come in really handy when you are trying to improve the way your website is built. It is definitely worth checking out!

Animated Opening Type

Animated Opening Type Free Image Hover

This plugin also comes with a tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. Both the plugin and the tutorial might come in really handy for future projects. It’s definitely worth having a closer look at this example!

Stretch Gallery

Stretch Gallery Free Image Hover

If you liked the previous examples you will love this one! Stretch Gallery is an XML Canvas Gallery that allows you to create a nice portfolio gallery with some nice effects and customization settings.

Responsive List +

Responsive List  Free Image Hover

Hover or Click each element to see flip and bounceInLeft Effects of this cool free image hover effect plugin. Check it out!

Gallery

Gallery Free Image Hover

This plugin offers hover/expand functionality for horizontally oriented images. Images will expand after 1.5 seconds (can be changed based on 0.5 second intervals).

Ultimate Hover Effects

Ultimate Hover Effects

The Ultimate Hover Effects comes along with some modern and stylish hover effects for image captions. Use this plugin to create awesome effects for your website. Using it will definitely improve your website’s appearance, will make it more eye-catchy to visitors and might even improve your business.

Playground

Profile Expand Free Image Hover

This is a zoom effect image hover plugin, perfect for online stores, and especially for fashion websites. Check it out!

Profile Expand

Online HTML, CSS and JS Free Image Hover

This is a cool effect! When you click on your profile image, the social media icons will expand.

Responsive CSS Timeline with 3D Effect

Responsive CSS Timeline with 3D Effect

This is a tutorial about how to create an experimental CSS-only timeline with a 3D effect. The plugin can be downloaded for free. This plugin can be exactly what your website was missing!

Animated Responsive Image Grid

Animated Responsive Image Grid

This is a  jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. It is definitely worth taking a closer look at this examples as it might come in really handy in the future!

Hover Slide Effect with jQuery

Hover Slide Effect

This plugin makes an image area with several images slide out when we hovering over them, revealing other images. This is yet another plugin that can change the way your visitors interact with the website.

3D Thumbnail Hover Effects

3D Thumbnail Hover Effects

This is a great tutorial on how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. This plugin might come in really handy so check it out!

Photo Zoom Out Effect with jQuery

Photo Zoom Out Effect

Learn how to create a simple image zoom out effect with jQuery with this great tutorial. Also get the plugin for free!

Zoome – premium

Zoome Free Image Hover

Zoome is a jQuery plugin to help you zoom images with hover effect (grayscale, blur, transparent) and you can zoom-in or zoom-out use mouse wheel.

Want more? Try these free CSS snippets for image hovers

 

Image with title and subtitle on hover

Here is a great CSS snippet that creates this beautiful image hover effect. It has a subtle effect by adding title and subtitle and a semi-transparent gray top layer.

@import url(https://fonts.googleapis.com/css?family=Montserrat:200);
.snip1577 {
  font-family: 'Montserrat', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #fff;
  text-align: left;
  font-size: 16px;
  background: #000;
}

.snip1577 *,
.snip1577:before,
.snip1577:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.snip1577 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}

.snip1577:before,
.snip1577:after {
  position: absolute;
  top: 20px;
  right: 20px;
  content: '';
  background-color: #fff;
  z-index: 1;
  opacity: 0;
}

.snip1577:before {
  width: 0;
  height: 1px;
}

.snip1577:after {
  height: 0;
  width: 1px;
}

.snip1577 figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 15px 20px;
}

.snip1577 h3,
.snip1577 h4 {
  margin: 0;
  font-size: 1.1em;
  font-weight: normal;
  opacity: 0;
}

.snip1577 h4 {
  font-size: .8em;
  text-transform: uppercase;
}

.snip1577 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1577:hover img,
.snip1577.hover img {
  zoom: 1;
  filter: alpha(opacity=20);
  -webkit-opacity: 0.2;
  opacity: 0.2;
}

.snip1577:hover:before,
.snip1577.hover:before,
.snip1577:hover:after,
.snip1577.hover:after {
  opacity: 1;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.snip1577:hover:before,
.snip1577.hover:before {
  width: 40px;
}

.snip1577:hover:after,
.snip1577.hover:after {
  height: 40px;
}

.snip1577:hover h3,
.snip1577.hover h3,
.snip1577:hover h4,
.snip1577.hover h4 {
  opacity: 1;
}

.snip1577:hover h3,
.snip1577.hover h3 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.snip1577:hover h4,
.snip1577.hover h4 {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-title-and-subtitle-on-hoover

Image with button on hover

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600;);
.snip1573 {
  background-color: #000;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin: 10px 7px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.snip1573 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.snip1573:before,
.snip1573:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color: #000000;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  content: '';
  opacity: 0.9;
  z-index: 1;
}

.snip1573:before {
  -webkit-transform: skew(45deg) translateX(-155%);
  transform: skew(45deg) translateX(-155%);
}

.snip1573:after {
  -webkit-transform: skew(45deg) translateX(155%);
  transform: skew(45deg) translateX(155%);
}

.snip1573 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip1573 figcaption {
  top: 50%;
  left: 50%;
  position: absolute;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  -webkit-box-shadow: 0 0 10px #000000;
  box-shadow: 0 0 10px #000000;
}

.snip1573 h3 {
  background-color: #000000;
  border: 2px solid #fff;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  padding: 5px 10px;
  text-transform: uppercase;
}

.snip1573 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.snip1573:hover > img,
.snip1573.hover > img {
  opacity: 0.5;
}

.snip1573:hover:before,
.snip1573.hover:before {
  -webkit-transform: skew(45deg) translateX(-55%);
  transform: skew(45deg) translateX(-55%);
}

.snip1573:hover:after,
.snip1573.hover:after {
  -webkit-transform: skew(45deg) translateX(55%);
  transform: skew(45deg) translateX(55%);
}

.snip1573:hover figcaption,
.snip1573.hover figcaption {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

This is a nice CSS snippet for image hover that adds a button when you move your mouse over it.  It also attaches a 45° top black layer that highlights the button.

image-with-button-on-hover

Image and title with title border effect on hover

Here is a beautiful CSS snippet for image hover that slides a gray top layer over your image. It also adds a border on the title. Take a look and use it in your websites!

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600;);
.snip1571 {
  background-color: #000;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin: 10px 7px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}
.snip1571 *,
.snip1571 *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1571 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}
.snip1571 figcaption {
  bottom: 30px;
  left: 0;
  position: absolute;
  z-index: 0;
}
.snip1571 figcaption:before {
  background-color: #ffffff;
  bottom: -5px;
  content: '';
  left: 0;
  position: absolute;
  right: 100%;
  top: -5px;
  z-index: -1;
}
.snip1571 h3 {
  background-color: #c73232;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  padding: 5px 10px;
  text-transform: uppercase;
  z-index: 1;
}
.snip1571 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1571:hover > img,
.snip1571.hover > img {
  opacity: 0.1;
}
.snip1571:hover figcaption:before,
.snip1571.hover figcaption:before {
  right: -5px;
}
/* Demo purposes only */
body {
  background-color: #212121;
  text-align: center;
}

image-and-title-with-title-border-effect-on-hover

Image with slide down icon on hover

This is a neat hover effect that lets you add an overlay shape and icon over your image when you hover over it. It has a nice animation that comes along with this effect.

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1569 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 10px 8px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  font-size: 16px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.snip1569 *,
.snip1569 *:before,
.snip1569 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.snip1569 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1569 figcaption {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #009ab6;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  opacity: 0;
}
.snip1569 i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 4em;
  z-index: 1;
}
.snip1569 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1569:hover figcaption,
.snip1569.hover figcaption {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/* Demo purposes only */
body {
  background-color: #212121;
  text-align: center;
}

image-with-slide-down-icon-on-hover

Image with title on hover

This is a wonderful image hover effect that slides a white semi-transparent layer over your image. It also adds a title to describe the image better.

@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.snip1576 {
  background-color: #fff;
  color: #444;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  margin: 8px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.snip1576 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1576:after {
  background-color: #359ad8;
  height: 150%;
  bottom: -145%;
  content: '';
  left: 0;
  right: 0;
  position: absolute;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.snip1576 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1576 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.snip1576 h3 {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

.snip1576 h3 span {
  display: block;
  font-weight: 700;
}

.snip1576 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1576:hover > img,
.snip1576.hover > img {
  opacity: 0.1;
}

.snip1576:hover:after,
.snip1576.hover:after {
  bottom: 95%;
}

.snip1576:hover figcaption,
.snip1576.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-title-on-hover

Image with title and icon on hover

This is a great CSS snippet for image hover that lets you add a title and icon over any image from your website. This effect is visible only when you hover your mouse over the image.

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
.snip1572 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: left;
  font-size: 16px;
  background: #ffffff;
}

.snip1572 *,
.snip1572:before,
.snip1572:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.snip1572 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}

.snip1572:before,
.snip1572:after {
  content: '';
  background-color: #000;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.snip1572:before {
  width: 300px;
  height: 2px;
}

.snip1572:after {
  height: 300px;
  width: 2px;
}

.snip1572 figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
}

.snip1572 h3 {
  font-weight: 400;
  padding: 8px 15px;
  margin: 0;
  opacity: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.snip1572 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1572:hover img,
.snip1572.hover img {
  zoom: 1;
  filter: alpha(opacity=25);
  -webkit-opacity: 0.25;
  opacity: 0.25;
}

.snip1572:hover:before,
.snip1572.hover:before,
.snip1572:hover:after,
.snip1572.hover:after {
  opacity: 1;
}

.snip1572:hover:before,
.snip1572.hover:before {
  width: 50px;
}

.snip1572:hover:after,
.snip1572.hover:after {
  height: 50px;
}

.snip1572:hover h3,
.snip1572.hover h3 {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-title-and-icon-on-hover

Image with icon and title on hover

Here is a unique hover effect that you can easily implement into your website. This freebie adds a nice angled effect, an icon, and a title over your image.

@import url(https://fonts.googleapis.com/css?family=Poppins:300);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1570 {
  font-family: 'Poppins', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  font-size: 16px;
  line-height: 1.2em;
  text-align: center;
  font-weight: 300;
}

.snip1570 *,
.snip1570 *:before,
.snip1570 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.65s ease;
  transition: all 0.65s ease;
}

.snip1570:after {
  -webkit-transition: all 0.65s ease;
  transition: all 0.65s ease;
  position: absolute;
  height: 0px;
  width: 0px;
  bottom: -478px;
  right: -478px;
  border-radius: 50%;
  border: 500px solid transparent;
  border-bottom-color: #000000;
  border-right-color: #000000;
  content: '';
  opacity: 0.8;
}

.snip1570 img {
  max-width: 100%;
  vertical-align: top;
}

.snip1570 i {
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-radius: 50%;
  color: #000000;
  display: block;
  z-index: 10;
}

.snip1570 i:before,
.snip1570 i:after {
  border-radius: 50%;
}

.snip1570 i:before {
  color: #ddd;
  background-color: #fff;
  font-size: 37.64705882px;
  line-height: 64px;
  text-align: center;
  width: 64px;
}

.snip1570 i:after {
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -14px;
  right: -14px;
  border: 15px solid #ddd;
  border-bottom-color: #2980b9;
  border-right-color: #2980b9;
  content: '';
  z-index: -2;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5);
}

.snip1570 i:hover {
  background-color: #D2B17F;
  cursor: pointer;
}

.snip1570 h3 {
  top: 5px;
  color: #fff;
  letter-spacing: 2px;
  margin: 0;
  opacity: 0;
  padding: 10px 15px;
  position: absolute;
  left: 0;
  text-transform: uppercase;
  z-index: 3;
}

.snip1570 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
}

.snip1570:hover:after,
.snip1570.hover:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.snip1570:hover img,
.snip1570.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.snip1570:hover i:before,
.snip1570.hover i:before {
  color: #2980b9;
}

.snip1570:hover i:after,
.snip1570.hover i:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.snip1570:hover h3,
.snip1570.hover h3 {
  opacity: 1;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-icon-and-title-on-hover

Image and icon with title and caption on hover

This is a nice CSS snippet freebie that you can use for your websites. This adds an icon, a title, and a caption when you hover over the image. Take a look and use it in your projects.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1567 {
  background-color: #000000;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  display: inline-block;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  margin: 8px;
  max-width: 310px;
  min-width: 250px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.snip1567 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.snip1567 img {
  max-width: 100%;
  opacity: 0.75;
  position: relative;
  vertical-align: top;
}

.snip1567 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1567 h3 {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  background-color: #000000;
  top: 0;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0;
  padding: 10px 20px;
  position: absolute;
  width: 100%;
}

.snip1567 p {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0px 20px;
  opacity: 0;
  text-align: right;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip1567 i {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 54px;
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.snip1567 .hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background-color: rgba(236, 188, 46, 0.75);
  display: flex;
  font-size: 65px;
  justify-content: center;
  opacity: 0;
}

.snip1567 a {
  left: 0;
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.snip1567:hover .hover,
.snip1567.hover .hover {
  opacity: 1;
}

.snip1567:hover p,
.snip1567.hover p {
  opacity: 1;
}

.snip1567:hover h3,
.snip1567.hover h3 {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.snip1567:hover i,
.snip1567.hover i {
  -webkit-transform: translate(-50%, -50%) scale(0.1);
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-and-icon-with-title-and-caption-on-hover

Rounded images with icon on hover

This is a unique hover effect that you can easily implement into your website by downloading the free CSS snippet. This looks beautiful on rounded images and it adds icon and changes the border on hover.

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1566 {
  position: relative;
  display: inline-block;
  margin: 20px;
  max-width: 190px;
  width: 100%;
  color: #bbb;
  font-size: 16px;
  box-shadow: none !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.snip1566 *,
.snip1566:before,
.snip1566:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.snip1566:before,
.snip1566:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50%;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
  border: 2px solid #bbb;
  border-color: transparent #bbb;
}

.snip1566 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  border-radius: 50%;
  padding: 10px;
}

.snip1566 figcaption {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
}

.snip1566 i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 4em;
  z-index: 1;
}

.snip1566 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1566:hover figcaption,
.snip1566.hover figcaption {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.snip1566:hover:before,
.snip1566.hover:before,
.snip1566:hover:after,
.snip1566.hover:after {
  border-width: 10px;
}

.snip1566:hover:before,
.snip1566.hover:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.snip1566:hover:after,
.snip1566.hover:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

rounded-images-with-icon-on-hover

Image with offset border and title

Here is a great CSS snippet that lets you add a subtle hover effect on any image from your website. When you move your mouse over the image it will color the offset border.

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1556 {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #000000;
  display: inline-block;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 16px;
  margin: 8px;
  max-width: 310px;
  min-width: 250px;
  position: relative;
  text-align: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  box-shadow: none !important;
  padding: 30px 40px 0 0;
}

.snip1556 *,
.snip1556 *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.snip1556 img {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  position: relative;
  vertical-align: top;
}

.snip1556 figcaption {
  background-color: #333333;
  bottom: 30px;
  left: 40px;
  position: absolute;
  right: 0;
  top: 0;
}

.snip1556 h3 {
  font-size: 16px;
  position: absolute;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  color: #fff;
  left: 100%;
  letter-spacing: 1px;
  margin: 12px 0;
  opacity: 0.8;
  padding: 6px 40px 0 0;
  right: 0;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
}

.snip1556 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.snip1556:hover figcaption,
.snip1556.hover figcaption {
  background-color: #c0392b;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

terence-archives-image-with-offset-border-and-title

Image with title and caption on hover

Here is another beautiful hover effect that you can add to your website simply by downloading this free CSS snippet. It will slide a beautiful shape layer over your image and it will also add a title and caption.

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Teko:700);
.snip1563 {
  background-color: #fff;
  color: #ffffff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px 5px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: right;
  width: 100%;
}

.snip1563 *,
.snip1563 *:before,
.snip1563 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1563 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip1563:before,
.snip1563:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #b81212;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1563:before {
  -webkit-transform: skew(30deg) translateX(80%);
  transform: skew(30deg) translateX(80%);
}

.snip1563:after {
  -webkit-transform: skew(-30deg) translateX(70%);
  transform: skew(-30deg) translateX(70%);
}

.snip1563 figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 20px 20px 20px 40%;
}

.snip1563 figcaption:before,
.snip1563 figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #b81212;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip1563 figcaption:before {
  -webkit-transform: skew(30deg) translateX(100%);
  transform: skew(30deg) translateX(100%);
}

.snip1563 figcaption:after {
  -webkit-transform: skew(-30deg) translateX(90%);
  transform: skew(-30deg) translateX(90%);
}

.snip1563 h3,
.snip1563 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip1563 h3 {
  font-family: 'Teko', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip1563 p {
  font-size: 0.9em;
}

.snip1563 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1563:hover h3,
.snip1563.hover h3,
.snip1563:hover p,
.snip1563.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
}

.snip1563:hover:before,
.snip1563.hover:before {
  -webkit-transform: skew(30deg) translateX(30%);
  transform: skew(30deg) translateX(30%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip1563:hover:after,
.snip1563.hover:after {
  -webkit-transform: skew(-30deg) translateX(20%);
  transform: skew(-30deg) translateX(20%);
}

.snip1563:hover figcaption:before,
.snip1563.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(50%);
  transform: skew(30deg) translateX(50%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip1563:hover figcaption:after,
.snip1563.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(40%);
  transform: skew(-30deg) translateX(40%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-title-and-caption-on-hover

Image with title and quote on hover

This is a simple hover effect which will add an overlay image with a sliding effect. It also adds a title and a quote that are both visible only when you hover over the image.

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
.snip1552 {
  font-family: 'Source Sans Pro', sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: left;
  font-size: 16px;
  background-color: #fff;
}

.snip1552 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1552 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1552 figcaption {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 40px;
  right: 40px;
  z-index: 1;
  bottom: 0;
}

.snip1552 h3,
.snip1552 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip1552 h3 {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 5px;
}

.snip1552 p {
  font-weight: normal;
  font-style: italic;
  color: #888;
  font-size: 0.9em;
  padding-left: 15px;
  -webkit-transform: translateX(-25px);
  transform: translateX(-25px);
}

.snip1552 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1552:hover > img,
.snip1552.hover > img {
  opacity: 0.1;
}

.snip1552:hover h3,
.snip1552.hover h3,
.snip1552:hover p,
.snip1552.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-title-and-quote-on-hover

Image with multiple icons on hover

This is a great CSS snippet that adds a subtle top layer over the image that you move your mouse over. It also adds multiple icons that give you lots of possibilities.

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1550 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 10px 8px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  font-size: 16px;
  line-height: 1.2em;
}
.snip1550 *,
.snip1550 *:before,
.snip1550 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1550:before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  content: '';
  background-color: #ffffff;
  opacity: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1550 img {
  max-width: 100%;
  vertical-align: top;
}
.snip1550 .icons {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.snip1550 a {
  margin: 2px;
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.snip1550 a i {
  display: block;
  font-size: 23.52941176px;
  line-height: 40px;
  width: 40px;
  background-color: #ffffff;
  text-align: center;
  color: #000000;
}
.snip1550 a i:hover {
  background-color: #000000;
  color: #ffffff;
  cursor: pointer;
}
.snip1550:hover:before,
.snip1550.hover:before {
  opacity: 0.5;
}
.snip1550:hover a,
.snip1550.hover a {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.snip1550:hover a:nth-child(2),
.snip1550.hover a:nth-child(2) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.snip1550:hover a:nth-child(3),
.snip1550.hover a:nth-child(3) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
/* Demo purposes only */
body {
  background-color: #212121;
  text-align: center;
}

image-with-multiple-icons-on-hover

Image with single icon on hover

Here is a CSS snippet that you can use for just about any image from your website. This freebie lets you add gray shapes and an icon over the image that you hover over.

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1545 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 10px 7px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  font-size: 16px;
  background-color: #000000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.snip1545 *,
.snip1545 *:before,
.snip1545 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.snip1545 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}

.snip1545 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.snip1545 figcaption:before,
.snip1545 figcaption:after,
.snip1545 figcaption div:before,
.snip1545 figcaption div:after {
  opacity: 0;
}

.snip1545 figcaption:before,
.snip1545 figcaption:after {
  height: 50%;
  width: 50%;
  position: absolute;
  content: '';
  background-color: #080808;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.snip1545 figcaption:before {
  top: 0;
  left: 0;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.snip1545 figcaption:after {
  bottom: 0;
  right: 0;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.snip1545 figcaption div:before,
.snip1545 figcaption div:after {
  width: 50%;
  height: 50%;
  position: absolute;
  content: '';
  background-color: #000000;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.snip1545 figcaption div:before {
  top: 0;
  right: 0;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.snip1545 figcaption div:after {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.snip1545 i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 4em;
  z-index: 1;
  opacity: 0;
}

.snip1545 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1545:hover img,
.snip1545.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}

.snip1545:hover i,
.snip1545.hover i {
  opacity: 0.7;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.snip1545:hover figcaption:before,
.snip1545.hover figcaption:before,
.snip1545:hover figcaption:after,
.snip1545.hover figcaption:after,
.snip1545:hover figcaption div:before,
.snip1545.hover figcaption div:before,
.snip1545:hover figcaption div:after,
.snip1545.hover figcaption div:after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
  opacity: 0.8;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-single-icon-on-hover

Image with roll in disk on hover

Here is another wonderful hover effect that you can download for free and use in your websites. It is a simple CSS snippet that can make your images more lively.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800;);
.snip1541 {
  background-color: #fff;
  color: #fff;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin: 13px 7px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.snip1541 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1541 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1541 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1em;
  opacity: 0;
  -webkit-transform: translateX(75%) rotate(180deg);
  transform: translateX(75%) rotate(180deg);
}

.snip1541 figcaption:before {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #000000;
  border-radius: 50%;
  content: '';
  height: 100px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 100px;
  z-index: -1;
}

.snip1541 h3 {
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

.snip1541 h3 span {
  display: block;
  font-weight: 800;
}

.snip1541 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1541:hover > img,
.snip1541.hover > img {
  opacity: 0.1;
}

.snip1541:hover figcaption,
.snip1541.hover figcaption {
  -webkit-transform: translate(0px) rotate(0deg);
  transform: translate(0px) rotate(0deg);
  opacity: 1;
}


/* Demo purposes only */

body {
  background-color: #212121;
  text-align: center;
}

image-with-roll-in-disk-on-hover

Image with title and subtitle

This is a great freebie that includes the CSS snippet of a neat hover effect. This adds a title and a subtitle over your image as well as a red background.

@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Muli);
.snip1507 {
  font-family: 'Muli', sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  background-color: #000000;
}

.snip1507 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1507 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.75;
}

.snip1507 figcaption {
  z-index: 1;
  align-items: center;
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(195, 86, 97, 0.85);
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  padding: 20px;
}

.snip1507 figcaption:before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
  position: absolute;
}

.snip1507 h3,
.snip1507 h5 {
  margin: 0;
  letter-spacing: 1px;
}

.snip1507 h3 {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
}

.snip1507 h5 {
  font-weight: normal;
}

.snip1507 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1507:hover > img,
.snip1507.hover > img {
  opacity: 1;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}


/* Demo purposes only */

body {
  background-color: #212121;
}

image-with-title-and-sub-title

Image with title and caption on hover

Here is an excellent hover effect that you can use in your websites for any image that you want. This freebie comes with a full CSS snippet of a nice hover effect.

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
@import url(https://fonts.googleapis.com/css?family=Cardo);
.snip1484 {
  font-family: 'Josefin Sans', sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  background-color: #000000;
}
.snip1484 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}
.snip1484 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}
.snip1484 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.75);
  border: 4px solid rgba(255, 255, 255, 0.05);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}
.snip1484 h2,
.snip1484 p {
  line-height: 1.5em;
  margin: 0;
}
.snip1484 h2 {
  font-family: 'Cardo', serif;
  display: inline-block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.snip1484 p {
  padding: 8px 0 15px;
}
.snip1484 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1484:hover > img,
.snip1484.hover > img {
  opacity: 0.2;
}
.snip1484:hover figcaption,
.snip1484.hover figcaption {
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
/* Demo purposes only */
body {
  background-color: #212121;
}

image-with-title-and-caption-on-hover

Image with switching title and caption on hover

Take a look at this beautiful hover effect and use it in your websites for any of your images. This is a useful freebie that includes the CSS snippet.

@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
@import url(https://fonts.googleapis.com/css?family=Lato);
.snip1523 {
  font-family: 'Lato', sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  background-color: #1A1A1A;
}

.snip1523 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1523 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1523 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 30px;
  background-color: #202123;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.snip1523 h2,
.snip1523 h3,
.snip1523 p {
  margin: 0;
}

.snip1523 h2,
.snip1523 h3 {
  font-family: 'Slabo 27px', serif;
  line-height: 1.2em;
}

.snip1523 h2 {
  font-size: 1.9em;
  color: #35ADF9;
}

.snip1523 h3 {
  color: #EBEBEB;
  font-size: 1.3em;
  font-weight: normal;
  letter-spacing: 1px;
}

.snip1523 p {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9em;
  margin-top: 12px;
  padding: 12px 0 15px;
  line-height: 1.5em;
}

.snip1523 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1523:hover > img,
.snip1523.hover > img {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.snip1523:hover figcaption,
.snip1523.hover figcaption {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}


/* Demo purposes only */

body {
  background-color: #212121;
}

image-with-switching-title-and-caption-on-hover

Image with title, position, and icon on hover

This is another great hover effect that is available for free download. You can easily add this CSS snippet into your website and make this hover effect visible on your images.

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1512 {
  font-family: 'Lato', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  max-height: 230px;
  width: 100%;
  color: #000000;
  text-align: left;
  font-size: 16px;
  background-color: #1a1a1a;
  line-height: 1.2em;
}

.snip1512 *,
.snip1512 *:before,
.snip1512 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.snip1512 img {
  max-width: 100%;
  vertical-align: top;
}

.snip1512 figcaption {
  position: absolute;
  bottom: 0%;
  width: 100%;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  padding: 10px 20px;
  background-color: #ffffff;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.snip1512 h3,
.snip1512 p {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 0;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.snip1512 h3 {
  text-transform: uppercase;
  font-weight: 700;
}

.snip1512 p {
  font-weight: 400;
  font-size: 0.9em;
}

.snip1512 i {
  position: absolute;
  color: #fff;
  font-size: 34.11764706px;
  line-height: 58px;
  width: 58px;
  bottom: 0;
  right: 0;
  background-color: #e67e22;
  text-align: center;
  -webkit-transform: translateX(58px);
  transform: translateX(58px);
}

.snip1512 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.snip1512:hover img,
.snip1512.hover img {
  zoom: 1;
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  opacity: 0.3;
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
}

.snip1512:hover figcaption,
.snip1512.hover figcaption,
.snip1512:hover h3,
.snip1512.hover h3,
.snip1512:hover p,
.snip1512.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.snip1512:hover figcaption,
.snip1512.hover figcaption {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.snip1512:hover h3,
.snip1512.hover h3 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.snip1512:hover p,
.snip1512.hover p {
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
  opacity: 0.5;
}

.snip1512:hover i,
.snip1512.hover i {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}


/* Demo purposes only */

body {
  background-color: #212121;
}

image-with-title-position-and-icon-on-hover

Image with slide in title on hover

Here is a beautiful hover effect that adds a slide in the title when you move your mouse over the image. This freebie includes a ready-to-use CSS snippet.

@import url(https://fonts.googleapis.com/css?family=Raleway:900);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1441 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1px;
  min-width: 230px;
  max-width: 245px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  text-transform: uppercase;
  box-shadow: none !important;
}
.snip1441:first-of-type {
  margin-left: 10px;
}
.snip1441 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1441 .image {
  padding: 15px 0;
}
.snip1441 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  position: relative;
  opacity: 0.7;
}
.snip1441 figcaption {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #0d0d0d;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.snip1441 h4 {
  width: 100%;
  margin: 0;
  padding: 15px 20px;
  line-height: 1.1em;
  font-weight: 900;
}
.snip1441 i {
  position: absolute;
  right: 0;
  top: 0;
  padding: 8px 20px;
  font-size: 26px;
}
.snip1441 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1441:hover img,
.snip1441.hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 1;
}
.snip1441:hover figcaption,
.snip1441.hover figcaption {
  -webkit-transform: translateY(-2%);
  transform: translateY(-2%);
}
/* Demo purposes only */
body {
  background-color: #212121;
}

image-with-slide-in-title-on-hover

Recommended for you:



One thought on “20 Best Premium and Free Image Hover Effect Plugins”

  1. I would like to suggest one more to the list. If you use WordPress for your site this plug in will sure come in handy.

    wpvisualslideboxbuilder.com

    It is mostly for people not familiar with code, as it allows you to do everything visually.

Leave a Reply

Your email address will not be published. Required fields are marked *