Hoverbox Gallery Viewers

I combined :focus and :hover to produce these compact image viewers. I used pure CSS to control button and image behavior. I resolved many problems with these viewers. The last step involved assigning z-index settings to allow the :hover elements to float above the :focus and :active elements. They are fine for what they are, but the results are not pleasing.

Cursory inspection reveals the biggest problems. The images take a long time to load and the viewer will not work until the images are loaded. Once the images are loaded, hovering over the buttons will preview the full-size image. Clicking a button locks focus on the selected image, but the other buttons still activate previews. I might be able to push the idea a bit further using more z-index manipulation, but it’s not worth the effort. Te truth is, it is easier and more efficient to apply DOM-based JavaScript to the problem as I did in Gromyko's art gallery. True, the buttons do not change stae on hover; but I think page behavior and performance are superior. Gromyko's Art Gallery