How to achieve mouseover effect where a hover div slides in from the side
I've been taking a look at this WordPress theme: http://themes.thunderbuddies4life.com/?theme=longwave_wp
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:
- Each tile has it's own translucent overlay child div with title on it etc.
- Each overlay div is positioned somewhere outside the tile div. The tile has
- When the mouse hovers the div I use jQuery to work out which side the mouse entered (how?)
- 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.
- 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.
I also started a CSS only version - http://codepen.io/seanjacob/pen/rmIcD