The effect is achieved by setting tabindex=”1″ on the wrap-2 div, which means it can be targeted by css:focus. When the div is focused it changes the appearence of the image inside of itself. Clicking anywhere else on the page removes the focus from the div and hence everything returns to normal.
- No JS (!)
- Works in IE9 (!) and almost in IE8
- Did i mention no JS?
- No gallery navigation with arrows (it can be done tho, i just can’t be arsed). Tabbing works tho.
- Large thumbnails (the thumbnails need to be the full image, which is loaded when the page loads and not when requested by the browser)
This was mainly used as a test to see if it could be done, i wouldn’t recommend using this (at least not this version of it) in production.
[codepen_embed height=”600″ theme_id=”0″ slug_hash=”mPvQZW” default_tab=”html” user=”emillinden”]See the Pen <a href=’https://codepen.io/emillinden/pen/mPvQZW/’>mPvQZW</a> by Emil (<a href=’http://codepen.io/emillinden’>@emillinden</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]