CODEWITHSUNDEEP
csshtmleffects
andrei
andrei

Reputation: 8602

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

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.

Upvotes: 3

Views: 1339

Answers (4)

Dunhamzzz
Dunhamzzz

Reputation: 14808

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.

Upvotes: 2

andyb
andyb

Reputation: 43823

:active pseudo class for IE, :focus for non-IE as commented in the CSS.

Upvotes: 1

Semyazas
Semyazas

Reputation: 2101

The event that is firing to open the lightbox is the focus event. That is also why you can switch through the images by pressing tab or shift-tab. As Neil stated, you can find the details in the css file.

If you just load the site and press the tab button often enough to focus one of the pictures, the lightbox will also open.

Upvotes: 0

KaKa
KaKa

Reputation: 1553

Read about css3 transitions (this link has good explanation) ,it provides a way to animate changes to CSS properties, instead of having the changes take effect instantly, This site demonstrates few effects that can be achieved using it

Upvotes: 0

Related Questions