When hovering over Romeo, the text jarringly changes to white instead of fading in.

I wish this could be written in scss.

The anchor tag in the Lily effect only takes up the bottom half of figure.effect-lily, although the pointer cursor, indicating a link, applies to the entire figure. Here's what I see when I inspect the node in Chrome on OS X.

It seems like it's caused by the height attribute on the CSS style figure.effect-lily figcaption. It's only set to 50%. Of course, changing it to 100% fill the contain, but also screws up the text's position.

This isn't really a proper "issue" more of a question on your guys' go to method for making links within hover states work properly on touch devices. At the moment, if I download the repo as is and simply change <a href="#">View more</a> to <a href="http://www.something.com/">View more</a> if I touch the box, the effect does not happen, the browser thinks I want to go to that link and it takes me there. What would be great is a way of specifying you want one tap to mean bring up the box and link, the second tap actually then takes you to something.com.

I've experimented with javascript (jquery) based solutions before, such as using jQuery to add a class to the figure element on touch, but you can only use touchStart (which interferes with normal scrolling of the page) or touchEnd which could be missed if a user takes a long swipe/scroll through the page. This is the code I'm using at the moment on another project:

$('.portfolio__img').on("touchend", function (e) {
    "use strict"; //satisfy the code inspectors
    var link = $(this); //preselect the link
    if ( $( link ).hasClass( "portfolio__img--taphover" ) ) {
        return true;
    } else {
        link.addClass("portfolio__img--taphover");
        $('.portfolio__img').not(this).removeClass("portfolio__img--taphover");
        e.preventDefault();
        return false; //extra, and to make sure the function has consistent return points
    }
})

As mentioned though I'm not satisfied with the effect, and touchStart is worse as it messes up normal swipe scrolling by triggering the effect. It would be great if there was a "Tap" event or something. Or if there was a way of doing this in pure CSS. I tried making the z-index of the view more link 0 and then higher on hover, but that didn't work either.

I'd be very interested to hear what you guys do in production.

Thanks for the inspiration for these amazing effects.

Hi, on Safari the image is deform on height.

my mistake.. sorry! great script! :)

First of all thank you for this awesome examples :)

I have found some difficulties integrating it because this necessary CSS is in the demo.css. If you try to copy only the set1.css it will not work well because the box-sizing rule is missing.

The effects should work even if you don't load the demo.css or normalize.css file. My tests were with Chico effect, maybe others do work fine.

Last, this group of code, also present in set2.css should be moved to demo.css.