Note: This issue is specific to Windows Webkit and does not affect Macs
I am attempting to create a grid with fixed-size cells containing background images. When hovered over, the background image changes and the cell's height increases, overlaying the row beneath it.
After experimenting with different methods, I found that applying z-index to the row within a table worked best for this concept.
However, my problem lies in getting this functionality to work in webkit browsers. While it works fine in IE and Firefox, webkit seems to disregard the z-index settings on the row elements.
It's worth noting that each grid contains the jQuery cycle plugin, which may or may not be related to the issue. I'm also facing difficulties pausing the cycle plugin specifically in webkit browsers.
Here is the HTML code for the table and two rows:
(HTML code here)CSS for the content area/background/etc:
(CSS code here)Javascript snippet for the area (more based on specific IDs):
(JavaScript code here)If anyone has any insights into why this setup isn't functioning properly in webkit browsers, any assistance would be greatly appreciated!