How to achieve a lightbox effect with css only? Example available


Tags: css,html5,effects

Problem :

http://www.w3css.co.uk/

The website says it doesn't use :target, I looked at the source there is no js as far as i can see so its all just css then ? How . A small fiddle example or an explanation would be very much appreciated.Thanks.



Solution :

The CSS selector that is being using on the thumbnails is the :focus and :active selectors, which are applied when you click on an anchor (active for IE compatibility, and what you'll see in Firebug).

These selectors simply have the CSS transitions that expand the squashed image to full size, then obviously the :focus is lost when you click on another element and the lightbox disappears. You can also navigate using the tab keys as in doing so you are just switching the focus between the anchors and thus activating the CSS transitions again.


    CSS Howto..

    How to call the event of one element in another element in JQuery

    How to replace direct image calling with sprites, in JavaScript?

    How to add css to a single mvc Helper method when validation fails - from within the model

    How to keep image position despite window/device size?

    how to 3D rotate a 'a' tag?

    How to open a jquery tab from a link that is outside the tab?

    How to Change Font-family using JQuery's .css() function?

    How to pass jsf bean value to css calc function?

    How to darken a CSS background image?

    jQuery - How to adjust CSS filter (blur)?

    when users upload an image how can i use css to minimize skewing?

    How do you make these div elements display correctly?

    How to reference css and script files into a node.js app?

    How to add css to dynamic div Id

    CSS rule doesn't show up in developer tools

    How to create a label inside an element and style it?

    How can i make it through using bootstrap grid?

    How to add inset box-shadow to mapbox-div?

    How to debug html code for which css is being applied? [duplicate]

    CSS help, how to target this link inside of div

    How to use CSS to create a dynamic corner frame?

    how to center submenu under the parent `
  • `
  • How to apply master page and css to child page

    how to manage layers in position:absolute css block

    how to bring two blocks closer

    CSS : how to center a input inside a div

    How to add multiple font files for the same font?

    How to add text underneath the centered image

    How to match columns in a scrolling table with fixed headers

    CSS selector problem. Any ideas how to select this?