A CSS method to expand a container to reveal a half obscured/clipped image.

[frank]

Hi, just thought I’d share this as was asked to create 2 side by side images that are revealed on hover, without moving. Its not perfect, I can’t get the container to see the height so no clearfix, any suggestions? I’m going to try jQuery on it as clipping seems to be the way to go with this, again any suggestions welcome.

Using it temporarily on this page http://minniepeters.staging.wpengine.com/course-directory/

Heres the code: http://codepen.io/sites-visible/pen/LWrMOq

[frank]

Heres is the clip-path method.

http://codepen.io/sites-visible/pen/XMYGwa

I solved the clearfix issue by placing another copy of one of the images above the absolute positioned divs, floating it, setting its opacity to 0 and clearing the footer below! Cheeky but fair I reckon.

[Author]

Posts