How to achieve mouseover effect where a hover div slides in from the side

Tags: jquery,html,css

Problem :

I've been taking a look at this WordPress theme:

When a tile is hovered it seems a translucent div slides over the tile from the edge the mouse entered. I think a single div may be used for this but I'm not sure how it's acheived from looking at the page source.

I am pretty good with html and css but my jQuery is quite basic. I know this is a bit open ended but a brief explanation of the techniques involved would be helpful.

Edit: Thinking about it, without delving into the page source this is how I think the approach might work:

  1. Each tile has it's own translucent overlay child div with title on it etc.
  2. Each overlay div is positioned somewhere outside the tile div. The tile has overflow:hidden
  3. When the mouse hovers the div I use jQuery to work out which side the mouse entered (how?)
  4. I then apply a css class to the overlay div: either top, bottom, left or right. CSS will kick in to instantly position the overlay div just outside the corresponding edge of the tile div.
  5. jQuery then offsets the overlay div with animation to move it into position over the tile.

The tiles will be dynamically sized so jQuery will be needed to redefine the offset amounts depending on the tile size.

Solution :

They are using this -

I also started a CSS only version -

    CSS Howto..

    How to dynamically allocate block of text using css?

    How to use css image sprites in this code?

    How to force a responsive element to retain its aspect ratio [duplicate]

    How to make this div using html and css?

    Show content only in printing page not in browser page using CSS or javascript

    How to make custom login button work

    How to use window height in css using jquery

    How to specify correct output folder for CSS using SASS & LiveReload?

    How to make rails load multiple css files

    How to create both-sided dotted line around a title? [duplicate]

    How to apply Css class to a row using datatables.js?

    Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

    jQuery date picker show half day blocked

    How to use JSF generated HTML element ID with colon “:” in CSS selectors?

    How to add css files to a custom module in Odoo 8?

    how to avoid duplicate css when using vendor prefixes?

    How do I take multiple CSS files with the exact same selectors and force one to be used only on a specific div?

    How to reverse a CSS3 hover transformation?

    How are table cell widths calculated in html?

    Why the space after the table, and how to remove it?

    How to draw with CSS canvas a slideshow frame?

    How to transform:scale the top and bottom part of a div using CSS

    Positioning in CSS : How to make an absolute-positioned content display outside of its relative-positioned parent?

    How to make padding:auto work in CSS?

    How can i display all buttons to right in bootstrap panel heading?

    How to use JavaScript to scale an image to fit

    css how to set the tr that has a speicifc id

    How to enable links if a parent element uses a fullscreen pseudo-element?

    How to Grab an Icon Image

    How to make “transbox” full width