codrops / imagerevealhover

A set of link hover effects that reveal a thumbnail in different creative ways.

Image Reveal Hover Effects

A set of link hover effects that reveal a thumbnail in different creative ways.

Article on Codrops

Demo

Credits

• imagesLoaded by Dave DeSandro
• TweenMax by Greensock
• Images from Unsplash.com

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2018

imagerevealhover's Issues

Active image by default

Hello,

I am following you for very long time, You always inspired me in terms of animations and development. I am newbie on frontend development. I am learning new technologies and learn a lot from your articles.

I am using this plugin ImageRevealHover for my project. Plugin is great as always but i am facing a trouble to active first anchor active with image appeared by default. Could you please help me for cause.

It will really appreciated.
Waiting for your kind reply.

Thanks in advance.

Kind Regards,
Kamran Nasir

Grid is broken on big screens

Please check the grid element paddings, vw is pushing the text into "columns".

Fixed position problem

In my layout I encountered a positionning problem where fixed top: 0 for hover-reveal element was not on top of page but some pixels below.

I had to change such lines

ImageRevealHover/js/demo.js

Line 43 in b78daf9

this.DOM.el.appendChild(this.DOM.reveal);

by
document.body.appendChild(this.DOM.reveal);
to append html to body instead of target hovered container

Barba

It has issues with barba js.

The script is initialized again on transitionCompleted event but the images don't recognize the mouse coordinates once the page is loaded but the other letter animation works.