Skip to content
Image hover effects that work with or without bootstrap
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist removed rows and added responsive clearfixes to fix responsive issue … Feb 10, 2017
.gitignore grunt build changed, add clean & copy, fixed typo for effect 13, test… Feb 9, 2017
LICENSE inital commit Jul 28, 2015 Update Dec 29, 2016
gruntfile.js grunt build changed, add clean & copy, fixed typo for effect 13, test… Feb 9, 2017
package.json grunt build changed, add clean & copy, fixed typo for effect 13, test… Feb 9, 2017


html and css code for image hover effects with or without bootstrap

Have tested all individually in codepen using bootstrap.


If you wish to use these without bootstrap just remove the col classes from the top level div.

We need to consider mobile, the hovers that reveal social icons are great except for many these will be inaccessible as some mobiles do not understand a hover state. One way would be to put some visible soical icons else where and leave the hover social icons there as a nice effect for those who find them. Another option is to use CSS media queries so on small screen sizes the styles are already in place. They will not be able to see the cool effect but atlest you are making any content hidden by the hover styles more accessible.

For example on the first effect these are the styles that are applied during a :hover state. So you'd simply copy the styles again and wrap them inside and media query and remove the :hover part of it.

For example you would copy the following:

hovereffect:hover img { -ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2); }

.hovereffect:hover .overlay { opacity:1; filter:alpha(opacity=100); }

.hovereffect:hover h2,.hovereffect:hover { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); }

And then wrap it inside a media quiery and remove all the :hover from the styles.

@media (max-width: 750px) {

hovereffect img { -ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2); }

.hovereffect .overlay { opacity:1; filter:alpha(opacity=100); }

.hovereffect h2,.hovereffect { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); }



Make all the effects fully responsive. Some are already/some need slight changes depending on sizes.

Create the effects using SASS.

Special thanks to:

codrops ( start boot strap ( bootstrap ( font awesome ( github ( unsplash for images ( font squirrel ( codepen (

You can’t perform that action at this time.