Responsive CSS3 Lightbox with No Javascript

When pushing the boundaries of what is possible with CSS, it's always fun to try and eliminate extra elements from our code. In this case, I'm going to get rid of the javascript that is so often used when a lightbox is needed. We're also going to add some fancy animation, and while we're at it, let's make this sucker responsive too. Oh - and we're not going to use any media queries. Curious now?

Before We Start

There's a few important things to go over before we begin. While removing Javascript is great, it's not always necessarily as efficient, as it can do things like load in content, eliminate markup, etc. This demo is not necessarily going to be the best way to handle all scenarios that require a lightbox. That being said, it's pretty stinking awesome that this can now be done using fairly basic CSS techniques, don't you think?

This has been tested in all modern versions of Chrome, Safari, Firefox and Opera. I couldn't care less about IE for the sake of demos, but even if there are bugs in IE, I know it's capable of most everything being used here

The HTML

While some Javascript-based lightboxes can load in their elements dynamically, we don't have that luxury when using just CSS and HTML. Because of this, our markup is slightly heavier than if we were using JS.

html
<a class="lightbox" href="#goofy">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/158388/goofy.jpg"/>
</a> 
<div class="lightbox-target" id="goofy">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/158388/goofy.jpg"/>
   <a class="lightbox-close" href="#"></a>
</div>

See the Pen fdef1c8171371f9af8309cde8e6a63ae by Jesse Couch (@designcouch) on CodePen.

Let's go ahead and go over what we've got there. First, we have two parent elements: the link to trigger the lightbox (.lightbox) and the actual lightbox itself (.lightbox-target). You can put whatever you like within the .lightbox anchor; text, image etc. For our use, we're including a thumbnail image. Within the .lightbox-target div, we include the image we would like in the lightbox, as well as the anchor we will use to close the lightbox (.lightbox-close).

The CSS

I've tried to keep the CSS for this guy as slim as possible, but there's a lot going on here. To eliminate the extensive discussion after this code block, I've simply commented the CSS instead. Any questions on it, feel free to chime in below in the comments!

css
/*Eliminates padding, centers the thumbnail */

body, html {
padding: 0;
margin: 0;
text-align: center;
}

/* Styles the thumbnail */

a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}

See the Pen fdef1c8171371f9af8309cde8e6a63ae by Jesse Couch (@designcouch) on CodePen.

Great! That's really about it. Again, any questions can be addressed in the comments.

demo

See the Pen fdef1c8171371f9af8309cde8e6a63ae by Jesse Couch (@designcouch) on CodePen.

Did I help you out?

Read More

←  What CMS Will My Client Like? iOS7 Style Pure CSS Toggle  →

There are 121 comments. Add Yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. Jimmy

    Jimmy

    Nov 07, 2013

    All I can say is this: WOW. Had no idea that this was possible (I've always used js based lightboxes). It's a tiny bit above my head, but I'm determined to understand what's going on here.

    Reply to Jimmy

  2. J.C. Hendee

    J.C. Hendee

    Jan 06, 2014

    I desperately needed a simple lightbox-like image enlargement that would work with dynamically loaded content... which would not have functions added to anchors during the page's onLoad. As a novice with JQuery and not having time to delve it fully, I was baffled. Have not fully tried out this CSS option yet, but it was great relief to stumble on this option this morning over tea. Thanks for this!

    Reply to J.C.

    1. Jesse

      Jesse

      Jan 06, 2014

      Very glad I was able to help you out, J.C.! Let me know if I can answer any other puzzles - always on the lookout for topics to write on.

      Keep in mind, this solution was just a proof-of-concept, so it's not as ready for primetime as some of the full-fledged javascript alternatives.

  3. J.C. Hendee

    J.C. Hendee

    Jan 06, 2014

    Hey Jesse, the problem is that the JQuery and Ajax galleries will not initialize event triggers on content elements inserted dynamically after page load. So your trick was my only answer for now after a day's worth of code wrestling. At least you saved me for now until I can figure out a better solution.

    If you wish to see it in action...

    1) click my name in for this comment to reach the site,
    2) select "Ye Ol' Shop" in the main menu, and
    3) in the right-submenu after page load select "Runebound 2E";
    4) once the items subsection loads, select the last item (Cities of Adventure).

    In the content that loads you will find the "enlarge" icons/links that use your code below the main display image on the right.

    Reply to J.C.

    1. Jesse

      Jesse

      Jan 13, 2014

      Looks good, J.C. - really glad I could help you out!

  4. Van

    Van

    Feb 03, 2014

    This is awesome, no complicated workarounds and easy to understand, thanks so much! The custom X seems a little excessive though, I changed it to just use the character X...

    Reply to Van

    1. Jesse

      Jesse

      Feb 03, 2014

      Thanks, Van. Definitely tried to make it as easy to understand as possible. The main reason the custom X is there is so that I can have complete control over the appearance. Most typefaces do not have a perfectly symmetrical 'x' character. If I was going for wider support, I'd probably use your approach to support older browsers though. Thanks again for the input!

    2. Becks

      Becks

      Sep 23, 2014

      Where did you make this change? I'm having a hard time getting the close link to work/appear.

  5. Samji

    Samji

    Feb 20, 2014

    Great work, what I was looking for!

    Is there any way I can have "next" and "previous" buttons on the opened image - so that user can then navigate without going back?

    Reply to Samji

    1. Jesse

      Jesse

      Feb 21, 2014

      This was written as a solution for single images; a group of images in a slideshow would be possible, but not with this simple of a solution. If there is enough interest, I may consider cobbling a solution together at some point!

      My main argument against something like this would be that jQuery exists specifically to fill needs like this, and it doesn't really solve any important problems to do it with pure CSS. As I mentioned above, this was a proof-of-concept exercise, so I didn't spend too much time refining it.

    2. özer

      özer

      Aug 22, 2014

      Yes, there is a way and it's not complicated.

      http://codepen.io/ozerito/pen/rajKF

    3. Jesse

      Jesse

      Aug 22, 2014

      Thanks for the input, özer. Not entirely sure that your solution is quite as cut-and-dry as you may think. It's the obvious solution, but does not scale at all (you're adding at least one, and possibly two custom links to each and every target). If I were to call something a solution, scalability would be paramount. You're also completely missing a thumbnail for the second image, which is a standard UI convention for any gallery worth its salt.

  6. Tobias

    Tobias

    Feb 27, 2014

    Hi can i do the same with external links?

    Reply to Tobias

    1. Jesse

      Jesse

      Feb 27, 2014

      As long as the link is an image, it should work fine. If you're talking about an external page (in an iframe) you may be able to make that work, but it would take some modifications.

  7. Jack

    Jack

    Apr 29, 2014

    How to add some transition and hover effects in this light-box?
    Like on hover the opacity should be changed and there should be some caption?
    I'll be looking 4wd for ur reply!

    Reply to Jack

    1. Jesse

      Jesse

      Apr 30, 2014

      That is all possible with fairly basic CSS - this was more a proof of concept than a complete solution. If there is enough demand for it, I may code up a much more robust solution with things like multiple slides and captions.

    2. Jack

      Jack

      Apr 30, 2014

      Thank you. I would like to see.

    3. Jack

      Jack

      May 12, 2014

      Actually I don't have any URL yet. I am just working on my 1st project yet!
      Any ways, Thank you very much for your precious time.

    4. Jesse

      Jesse

      May 12, 2014

      I'm sorry in advance if I'm reading this the wrong way, but are you seriously being sarcastic? I try to put this stuff out there because it interests me, and I want to share it. However, I'm not going to spend hours of work purely at the request of one person. I'm sorry if my unwillingness to work for free has upset you.

      There is a MASSIVE amount of benefit from learning to do stuff for yourself. Build on what someone else has done, instead of asking folks to do it for you.

      There have been many times that I've found something that someone else created online, and I said to myself, "Hey - this would be perfect if it just did this one other thing.." And do you know what I did? I figured it out - and was a better coder for it.

      So to you I say: go and figure it out. You'll learn something (and that's a very positive thing).

    5. Jack

      Jack

      May 13, 2014

      All right. I got it. Thank you very much. Whenever I complete my project, I'll surely send you the URL to look at. Thank you very much (y)

  8. Friso

    Friso

    May 09, 2014

    Hello,
    I have copy the script, everything works but i can't close the lightbox...
    does anyone know why?

    Thanku!

    Reply to Friso

    1. Jesse

      Jesse

      May 09, 2014

      Without seeing your code, there's very little I can answer here. Do you have a URL?

  9. john

    john

    May 16, 2014

    You great i think it's imposible... Great Jobs...!! :D

    Reply to john

  10. Tyler

    Tyler

    May 21, 2014

    Hi! This is great, but can this be done for mobile? (Namely, without using "position: fixed;"

    Reply to Tyler

    1. Jesse

      Jesse

      May 21, 2014

      Thanks, Tyler. If you didn't notice, the demo actually already functions well on mobile. Using fixed positioning is not necessarily unfriendly to mobile; in fact, current versions of most Android and iOS browsers fully support fixed positioning. There's no reason to avoid it from a code standpoint. That being said, it can definitely interfere with good UI - but not in the case of this lightbox.

      If you're worried about supporting older versions of mobile browsers that are more buggy when it comes to fixed positioning, you may need to look elsewhere :)

    2. Tyler

      Tyler

      May 21, 2014

      Thanks, Jesse!

  11. Berk

    Berk

    May 22, 2014

    very thanks..! I long time searching this expression and I finally found this site again very thanks...

    Reply to Berk

  12. Rene

    Rene

    Jun 06, 2014

    Very cool! I developed a similar pure CSS3 lightbox as plugin for WordPress. If you like to look at it, you find it at http://wordpress.org/plugins/css3lightbox/

    Best regards from germany,
    René

    Reply to Rene

    1. Jesse

      Jesse

      Jun 06, 2014

      Not too shabby! Let me know if/when you figure out the gallery component. I'd be very curious about a solution like that, as multiple folks have asked in the comments above about using my demo for galleries.

  13. tomicrow

    tomicrow

    Jun 07, 2014

    A simple full screen overlay using CSS only...

    http://www.corelangs.com/css/box/fulloverlay.html

    tomi

    Reply to tomicrow

    1. Jesse

      Jesse

      Jun 09, 2014

      Not too bad, Tomi. Polishing it up aesthetically might be the next step; your login box is off center and stuck to the very top, and there are no animations applied. You've got the general idea though!

  14. Luke

    Luke

    Jun 19, 2014

    Hi Jesse,

    Love this by the way.

    I've been playing around with the code, trying to use the effect on multiple thumbnails on the same page. However when clicking one of these, all thumbnails are still visible above the overlay.

    Any fix to this? (Could well have overlooked something simple, fairly new to coding.)

    Thanks

    Reply to Luke

    1. Luke

      Luke

      Jun 19, 2014

      I basically have the below code repeated several times. Tried changing the id's but then the lightbox didn't work.

      ------------------------






    2. Luke

      Luke

      Jun 19, 2014

      a class="lightbox" href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#project1"
      img src="images/placeholder.jpg" class="tile"
      /a
      div class="lightbox-target" id="project1"
      img src="http://placehold.it/1000x1000"
      a class="lightbox-close" href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#" /a

    3. Jesse

      Jesse

      Jun 19, 2014

      Glad I was able to help you out with the lightbox.

      As to your struggles, here's what help I can give.

      1. With the other thumbs being above the overlay, you may want to read up on a CSS property called z-index. this determines the stacking order for anything that is not statically positioned (it applies to relative, absolute & fixed positioning). I would guess that your thumbs have a higher z-index than the overlay.

      2. As to your struggles with creating multiple thumbs: you need an individual ID referencing each thumb's target. Since this tutorial is using ":target", you can't get around this. Changing the ID will break the functionality. I recommend reading up on how ":target" works.

      3. Lastly, your code is referencing my site's URLs, and not just the target. In the href part of your anchors, you should only have the hash and the ID. Like this: "#project1".

      Hopefully this helps. If you get stuck on something specific, hit me back up here, and I'll do what I can to assist.

  15. Charmila

    Charmila

    Jun 19, 2014

    Thank you soooo but so much!. This is awesome :)

    Reply to Charmila

  16. Laura

    Laura

    Jun 23, 2014

    Hi Jesse,

    Thank you so much for this post it, has helped me so much!
    I'm in the process of building a single page portfolio site.
    I have used your code here, on my work page: http://codepen.io/lauramortier/pen/ChlcD

    If you click on "Work", it'll take you down to my portfolio where I have
    a grid of thumbnails for each of my pieces and the lightbox works beautifully.... until you close the lightbox, and the page jumps all the way to the top.... Would you have an idea on how to fix that?

    Thank you in advance! :)

    Reply to Laura

    1. Jesse

      Jesse

      Jun 23, 2014

      Hey Laura - glad I could help you out! What you're experiencing is one of the limitations of using the :target technique; it relies on anchors (links) hashing the URL in order to function. The 'close' button in the modal view is an anchor with an href "#" which removes the hash for your modal.

      After looking at your code, what I would recommend doing is replacing the '#' href on the 'close' button with '#page3'. This will tell the modal to close, but also keep your page fixed on the work section, instead of jumping back to the top.

      Hope this helps - happy coding!

    2. Jesse

      Jesse

      Jun 23, 2014

      Played around with your codepen, and the fix above does indeed work.

    3. Laura

      Laura

      Jun 23, 2014

      Thank you so much! You're a lifesaver! :D

    4. Laura Mortier

      Laura Mortier

      Jun 24, 2014

      Hi Jesse- I have one more question... How would you got about displaying a caption in the lightbox? I don't know if you've experienced with it yet, but I was trying to mess with it and I can't seem to figure it out.

      Sorry, I'm a n00b :(

    5. Jesse

      Jesse

      Jun 24, 2014

      No worries - noobs welcome here! You'd just need to add a div within the lightbox-target div, give it a class, and style it accordingly in your CSS.

    6. Craig

      Craig

      Jul 03, 2014

      Hey Laura and Jesse, I wanted to point out another fix for the scrolling issue, and that is to change a href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#" to a href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#!", which does the exact same thing but prevents the page from scrolling up at all, assuming "!" is an ID that doesn't exist. You could also use "#WhereEverYourBrowserWasBefore", assuming that didn't exist. Now we don't have to scroll at all!

      Here's the reason why this works: http://www.w3.org/TR/html5/browsers.html#scroll-to-fragid.

  17. Tyler

    Tyler

    Jun 27, 2014

    I'm about to give this a try, but my site relies heavily on hashchange events and I'm wondering if I'm going to have to do some major refactoring in order to get this to work. I'll give it it a go and occasionally check back here to see if anyone has any input, but hopefully I'll run into few/no problems...

    Reply to Tyler

    1. Tyler

      Tyler

      Jun 27, 2014

      Whoops, I guess I should I have read the whole article first, this is a fun a thought experiment, but if you have even a decent number of images that you want lightboxes for, that's a lightbox for every single image, which ends up turning into a lot of markup. While this is cool, I'm still partial to a lightbox template that dynamically loads content in via javascript.

      Does anyone have any values on the performance difference between the two?

    2. Jesse

      Jesse

      Jun 30, 2014

      Exactly - all this was ever intended to be was a proof of concept. I actually prefer throwing in a little JS where needed to reduce the markup.

      The performance is actually quite nice when compared to JS solutions, but depends on browser support and other factors to perform optimally. Because of this, it may not be a solution for everyone.

      Personally, I think that this fits really well when you need to simply be able to bring focus to one image (like a header image) on a page, but when you try to build a gallery out of it, may not be as ideal.

  18. Gabriel

    Gabriel

    Jul 09, 2014

    How can I make this work within a container? I'm trying to implement this into a bootstrap site and it seems that the lightbox won't take the full width of the viewport because of the container. Take a look: http://i.imgur.com/kANL5mi.png

    Reply to Gabriel

    1. Jesse

      Jesse

      Jul 10, 2014

      Since I can't see your code, I can only guess, but here are a few suggestions:

      1. Remove any relative positioning from the container, and make sure that your target container (the modal window) is using fixed positioning, not absolute.

      2. Make sure that the container has overflow set to visible in your CSS, not hidden.

      3. Set the modal window's top, bottom, right and left to 0 in your CSS.

      That's all I've got without seeing a functioning page and being able to inspect the code. Hope it helps!

  19. Daniel

    Daniel

    Jul 16, 2014

    This is awesome. I've been looking for something like this for so long!

    I have a question though: how to avoid showing again the image you've just expanded when you hit the back button in your browser?

    I mean, if I click/close 3 times on goofy.jpg, I have to hit the back arrow in my browser 7 times to go to the initial page.

    That wouldn't be possible, would it?

    Reply to Daniel

    1. Jesse

      Jesse

      Jul 16, 2014

      That's one of the limitations to the method, unfortunately. You would throw in a little JS to unhash the url, but that defeats the purpose of a pure CSS solution. Glad you liked it otherwise, though!

  20. Bank

    Bank

    Jul 17, 2014

    Thank You Very Much

    Reply to Bank

  21. Sam Lyons

    Sam Lyons

    Jul 22, 2014

    I am trying to use your script on the Privacy Policy link down the bottom of my website - www.plugmedia.ie and I wonder might you be able to suggest what I have done wrong please?

    Kind regards,

    Sam

    Reply to Sam

    1. Jesse

      Jesse

      Jul 23, 2014

      First off, really like your site - particularly when the plug reaches the section that it 'plugs in to'. Very creative.

      Your site is not allowing for the URL to be hashed, and that is what powers the :target state in the CSS. I would assume that your site is disabling this through some sort of JS.

      This was only ever intended as a proof of concept, and since your site is OBVIOUSLY using extensive JS, you would probably be better served to simply use a prefab JS lightbox - I like Featherlight.js personally.

  22. Spacle

    Spacle

    Aug 16, 2014

    Hi Jesse, This is awesome! Nice Job. I've been looking for something like this without a javascript... Can I have an overlay like this automatically on page-load for some info on my site without having someone click on some sort of linked image for it to happen... e.g. on page-load, the lightbox pops up with facebook like, twitter follow and an ad... Please help. Thanks in advance

    Reply to Spacle

    1. Jesse

      Jesse

      Aug 18, 2014

      Absolutely - this is powered by the URL, so all you would need to do is include the pertinent hash in your url, and you'd be good.

  23. Renjith

    Renjith

    Aug 25, 2014

    Thanks.. :)

    Reply to Renjith

  24. Myat Htut

    Myat Htut

    Sep 01, 2014

    So use full for me thanks

    Reply to Myat

  25. Sandra

    Sandra

    Sep 01, 2014

    No funciona con muchas imagenes es una farsa

    Reply to Sandra

    1. Jesse Couch

      Jesse Couch

      Sep 01, 2014

      No hay necesidad de ser grosero . Esto no pretende ser una solución completa.

    2. Claudio

      Claudio

      Oct 16, 2014

      Si funciona con varias imágenes, sólo debes indicar el id destino:














  26. Anonymous

    Anonymous

    Sep 03, 2014

    Thank You So Much ...

    Reply to Anonymous

  27. bulumko

    bulumko

    Sep 04, 2014

    Thank you so much! You got straight to the point. Brilliant! I could kiss you right now!

    Reply to bulumko

    1. Jesse

      Jesse

      Sep 08, 2014

      Glad to help, bulumko. No need for kisses :)

  28. Alex

    Alex

    Sep 08, 2014

    This is just the solution I was looking for. Thank you, Jesse!

    I had one question. Have you found a way (using only CSS) to close the lightbox by typing the escape key on the keyboard? My suspicion is that you need JQuery to do that. But I'm hoping you have a workaround.

    Thanks again,
    Alex

    Reply to Alex

  29. Alex

    Alex

    Sep 08, 2014

    This is just the solution I was looking for. Thank you, Jesse!

    I had one question. Have you found a way (using only CSS) to close the lightbox by typing the escape key on the keyboard? My suspicion is that you need JQuery to do that. But I'm hoping you have a workaround.

    Thanks again,
    Alex

    Reply to Alex

  30. Jo

    Jo

    Sep 16, 2014

    Hi there!

    First off, thanks for this. It's helping me tremendously. The WYSIWYG editor I'm using doesn't allow for popups or lightboxes with HTML (iframe) content, so I've been trying to navigate this in a way that makes it inclusive. Couple of questions:

    1) How would I adjust the positioning of the iframe considering your code? Everything works well as is, but I don't know what to change in order to make the iframe content centered horizontally and vertically. Here's the code without CSS. Note how I've replaced the image:





    Like I said, everything works fine, it's just positioned top left.

    2) How could I reposition the thumbnail so that it can be on the left or the right? Not just centered. This will make it easier to create a "gallery" effect with multiple thumbnails. Also, will this affect the lightbox positioning?

    Thank you so much again for this code and all of your help!

    Reply to Jo

    1. Jo

      Jo

      Sep 16, 2014

      I figured out the thumbnail positioning, now I just need help with the iframe positioning inside the lightbox.

    2. Jesse

      Jesse

      Sep 18, 2014

      Thanks for the kind words, Jo. Modifying an iframe's content is actually quite difficult, especially if the iframe references content outside of your own domain. If you have access to the source of the iframe, then I would recommend styling the content locally there, instead of trying to do it remotely from the page serving the iframe. Hope this helps!

  31. Becks

    Becks

    Sep 24, 2014

    Hey, it's awesome to find a way to do this using just CSS!

    Quick question: When I close a lightbox using this code, one that is positioned about halfway down a page, it returns me not to the point on the page where I was but to the top, almost like it's refreshing the page when I close it.

    Is there a way to close the image and have it return you to exactly where you were on the page?

    Reply to Becks

    1. Jesse

      Jesse

      Sep 24, 2014

      Becks - glad you enjoyed it. As Craig points out in the comments above, the easiest way to avoid the page jump is to change the close button href from "#" to "#!". This makes the page assume that the "!" that follows the hash is an id that does not exist, and forces the page to maintain its current scroll position.

      Here's why it works:
      http://www.w3.org/TR/html5/browsers.html#scroll-to-fragid

  32. Claudio

    Claudio

    Oct 15, 2014

    I know it's a dump question:

    If I put this code into a container already centered, it display it self as if the left border were the browser border, so the close X dissapears and if the image is too big it gets choped.

    Any thoughts?

    Reply to Claudio

    1. Sergio

      Sergio

      Oct 23, 2014

      hola amigo! tuve el mismo problema, pero al final lo "arreglé" reduciendo el tamaño del fondo negro del lightbox al tamaño de mi cuerpo del sitio, no es lo ideal pero por lo menos sirve, no pude encontrar la manera de que se ponga negra toda la pantalla independiente del tamaño del sitio. Ahora el problema que tengo es que cada vez que cierro una imagen lightbox me envía hacia arriba al top de la página y yo quiero permanecer en el mismo lugar donde quedé xD saludos!

  33. Sergio

    Sergio

    Oct 23, 2014

    hey my friend! this is awesome! but i have only 1 question. After i scroll down and click the other lightboxes below, when y close them it sends me to the top of the page... what can i do to stay in the same pace of the page after i close a lightbox??? thank you!!!!

    Reply to Sergio

    1. Jesse

      Jesse

      Oct 24, 2014

      Glad you like it, Sergio. The easiest way to do this is change the href for the "close" anchor from href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#" to href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#!".

  34. soyc

    soyc

    Oct 24, 2014

    How about youtube or vimeo video?

    I want to use this for video pop up than image.
    This code fits for video link?
    Are there some fixs of code needed?
    please give me tip for my quest.
    Thanks in advance.

    Reply to soyc

    1. Sergio

      Sergio

      Oct 24, 2014

      Mate, i think it shouldn't be a problem since maybe all you have to do is to change the "img src" for the of the vimeo or youtube embeded link. Remember to set up the widths and heights in your css. I'm not an expert at all but i think it should work, i'll try it myself :D, and if i'm wrong please forgive me as i said i'm no expert :) Cheers mate!

  35. João Paulo

    João Paulo

    Dec 02, 2014

    WOOOOoooW ... amazing! Thanks

    Reply to João

  36. Lucchini

    Lucchini

    Dec 09, 2014

    Hi Jesse,

    Bravo for youy great work.
    Is there a way to launch the lightbox directly at opening of the page ?

    Thanks a lot

    Reply to Lucchini

  37. Tatiana

    Tatiana

    Jan 02, 2015

    thank you

    Reply to Tatiana

  38. Tatiana

    Tatiana

    Jan 02, 2015

    Just one question! When i put several images in a row there are dashes between them. I figured out that it is because of fixed position. But if i change it, it leads to eliminating of lightbox background. Could you reccomend something?

    Reply to Tatiana

  39. Sam Livingston

    Sam Livingston

    Jan 19, 2015

    Really cool post bro .. I implemented this on my blog ... its working fast and cool !

    Reply to Sam

  40. Koli imalat

    Koli imalat

    Jan 31, 2015

    You big man!

    Reply to Koli

  41. Razac

    Razac

    Feb 05, 2015

    Hi jesse, simply super bravo :) ..but you a question, how can i turn an image hover effect? So if i go with mouse over an image, another image should be displayed. Thank you.

    Reply to Razac

  42. Shane

    Shane

    Feb 16, 2015

    This looks really great and functions beautifully! One quick question, I'd like to add a white box below the image that stretches the length of the screen and holds text (i.e. a description of the image). I've got everything working except that the white box won't appear below the image - it only appears at the top. I considered explicitly setting the top but then i'd have to use javascript to auto-calc the position. Any ideas?

    Reply to Shane

    1. Jesse

      Jesse

      Feb 19, 2015

      Thanks Shane. Glad you like it - my solution would be to create a container div that holds your image and your caption, and style it similar to how the image itself is treated in my example. Hope this helps!

  43. Rachel

    Rachel

    Jun 15, 2015

    Hey so I was wondering what extra code you would need if the image you want to pop out is in a push menu. I was hoping for the menu to slide back out of sight and the image to pop up over the original image of the site?

    Reply to Rachel

    1. Jesse

      Jesse

      Jun 16, 2015

      Hey Rachel - I'm not entirely certain what you're asking for here. Could you possibly provide an example, or share the code from what you're working on?

  44. so

    so

    Jun 17, 2015

    This is awesome!

    Unfortunately, when I open the lightbox, there is a white bar to the left of the screen that pushes the X button out of view...The enlarged photo is always pushed the the left.

    Do you know what causes this?

    Reply to so

    1. Jesse

      Jesse

      Jun 19, 2015

      So - glad you like it. The white bar doesn't appear in the demo, so I would imagine something got changed in the code when you ported it over. If I could see the example where you're seeing this issue, I could very quickly answer this. Can you provide a URL?

  45. Joe

    Joe

    Jul 21, 2015

    Very nice solution. I'm having trouble getting variable images to display in the light box--the thumb comes out fine, but when clicked on, the image link appears to be broken in the large lightbox:

    (in PHP):

    echo '





    ';

    Any suggestions?

    Reply to Joe

    1. joe

      joe

      Jul 21, 2015

      code didn't come through in earlier post--this is in PHP and $info variable pulls a specific image and is defined earlier in the code. This is in a for loop:










      if I replace the second img src variable with any http address, (i.e., ), it works, but I cannot get it to pull image from local folder.

      Any suggestions would be greatly appreciated
      Thank you

    2. joe

      joe

      Jul 21, 2015

      a class="lightbox" href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#big"
      img src="images/'.$info.'.jpg" onerror=this.src="images/generic.jpg" width = "125" height="157"
      /a/td

      div class="lightbox-target" id ="big"
      img src="images/'.$info.'.jpg" onerror=this.src="images/generic.jpy"/
      a class="lightbox-close" href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#!"/a
      /div';

  46. Armando

    Armando

    Jul 21, 2015

    Nice!! Just tried it and it worked really well.
    Thanks a lot.

    Reply to Armando

  47. Quinten

    Quinten

    Aug 05, 2015

    Best Jesse,

    First of all I'm a beginner with making websites.
    I ran into a problem and I hope you can help me with it.

    I did all of what you have done here, changed a few thing and it works fine with one picture (and more in a row)

    But the thing is.. I have 1 picture, then some text underneath it and then I need again a few pictures.
    When I did put the same HTML codes over there, he adds the picture next to the first picture instead of the place I put the HTML codes.

    Do you know how I can fix it so I can place the picture everywhere I would like that they are?
    Thank you very much!

    Best regards,
    Quinten

    Reply to Quinten

    1. Quinten

      Quinten

      Aug 06, 2015

      Never mind on this one.
      I found the salution and everything works ;)

  48. Rthessin

    Rthessin

    Aug 28, 2015

    Hi, I just about got this working but when I load the CSS into my (skeleton) container I get this wide white margin on the left and the "X" disapears. Any chance you want to demo the same code but evan simpler, with no "X" and just a click on image to close the lightbox ?

    Happy travels

    Reply to Rthessin

    1. Eren

      Eren

      Oct 15, 2015

      Hello there!

      Very nice work.I will add your lightbox code to my site.

      But i need to add comments/writing to pictures in lightbox.For example, a transparent layer can be placed in front of picture and writing can be on this layer, can you help about that?

      Thanks in advance.

    2. Tehran Site Design

      Tehran Site Design

      Oct 16, 2015

      Great, Thank You For Sharing

  49. lasertest

    lasertest

    Oct 23, 2015

    I really love your blog.. Excellent colors & theme.

    Did you develop this web site yourself? Please
    reply back as I'm hoping to create my very own website and want to find out
    where you got this from or just what the theme is named.
    Thanks!

    Reply to lasertest

    1. Jesse

      Jesse

      Oct 29, 2015

      The blog (and the whole site, actually) are a fully custom design, created and developed by yours truly. Sorry, but it's not an available theme anywhere - almost all of the work I do is full custom, so my site needs to be a testament to the skill I bring to the table for clients.

  50. Eunice

    Eunice

    Nov 29, 2015

    Hello there I am so glad I found your blog, I really found yyou by error,while I was looking on Digg
    for something else, Anyhow I am here now and would just luke to say thanks a lot
    for a tremendous post and a all round enjoyable blog (I also love the theme/design), I don_t have time
    to browse it all at the moment but I have saved
    it and also added your RSS feeds, so when I have time I will
    be back to read a lott more, Please do keep up the superb b.

    Reply to Eunice

  51. Wilburn

    Wilburn

    Nov 30, 2015

    It's actually a nice and helpful piece of info. I'm glad that you
    simply sared this helpful information with us.
    Please keep us up to date like this. Thaank you for sharing.

    Reply to Wilburn

  52. Ayse

    Ayse

    Dec 01, 2015

    Hi. Thank you for the lightbox.

    But I can only have 4 images, the others don't appear as thumpnails. Only one of the others shows up in lightbox at the same time as the 4th image.
    What can I do?

    a.lightbox img {
    width: 250px;
    height: 250px;
    border: 3px solid white;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    margin-top: 94px;
    margin-left: 10%;
    float: left;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    }

    .lightbox img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);

    }

    .lightbox-target {
    position: fixed;
    top: -100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    overflow: hidden;
    z-index: 9999;
    }

    .lightbox-target img {
    margin: auto;
    position: absolute;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    max-height: 0%;
    max-width: 0%;
    width: 500px;
    height: 500px;
    border: 3px solid white;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    box-sizing: border-box;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    }

    a.lightbox-close {
    display: block;
    width:50px;
    height:50px;
    box-sizing: border-box;
    background: white;
    color: black;
    text-decoration: none;
    position: absolute;
    top: -80px;
    right: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    }

    a.lightbox-close:before {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: black;
    position: absolute;
    left: 26px;
    top:10px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    }

    a.lightbox-close:after {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: black;
    position: absolute;
    left: 26px;
    top:10px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    }

    .lightbox-target:target {
    opacity: 1;
    top: 0;
    bottom: 0;
    }

    .lightbox-target:target img {
    max-height: 100%;
    max-width: 100%;
    }

    .lightbox-target:target a.lightbox-close {
    top: 0px;
    }

    Reply to Ayse

    1. Jesse

      Jesse

      Dec 03, 2015

      Sorry, Ayse - this is really only intended as a proof of concept and would need to be thoroughly re-worked/re-thought to accommodate a gallery of images instead of a single one. It's something I've had on my to-do list for a while, but haven't really knocked out yet.

  53. jerrod

    jerrod

    Jan 18, 2016

    Hello! Got no other problems? Yes he wrote with no javascript needed and yes there is javascript. But it s not World War II my little hysterical girls. By the way the Best Website For Homework Help Services is http://speedypaper.net/

    Reply to jerrod

  54. VCKsquare

    VCKsquare

    Feb 08, 2016

    How can I use it for my website http://www.dustmoon.com. Please suggest me how to add this type of things to my website..Help me ASAP 'bout these things.

    Reply to VCKsquare

  55. Ramsey Lee

    Ramsey Lee

    Mar 25, 2016

    How do you apply this to multiple pictures?

    Reply to Ramsey

    1. Jesse

      Jesse

      Mar 25, 2016

      That isn't something I've explored yet; this isn't intended to be a full gallery replacement. That being said, it's something I've considered from time to time as it has been requested more than once. I'll write a new post once I get around to trying something like this.

  56. Lauranne

    Lauranne

    Mar 30, 2016

    Hi!
    I just wanted to say you a biiiiiiiiiig thanks!!!

    It's definitely much more "cute" compared to a js solution !
    And you wrote a really great step by step explanation with clear and concise description.

    In one word: perfect :)

    Reply to Lauranne

    1. Sarkari Malang

      Sarkari Malang

      May 07, 2016

      Thanks alot for your this fantastic efforts.
      is it possible to make it for multiple images?? because its only for one image and if multiple images are available that will be greatest.

    2. Jesse

      Jesse

      May 17, 2016

      Thank you so much - glad to be able to help you out :)

  57. Jose

    Jose

    Jun 08, 2016

    Keep having the issue when trying to duplicate images for the effect and an error occurs where the first image is the only image that pops up when clicking on other thumbnails and it says that the id="goofy" is invalid, any help?

    Reply to Jose

  58. Simon

    Simon

    Jun 13, 2016

    Hey Jesse,

    I found your code and wanted to use it for a gallery page. I was having the same problems everyone else was having, I read through all the comments. Saw that you said you only created this as an example use of one image. I messed with it and figured out how you can use it for a galley page. It is simple but not sure if it is 100%.

    For each image as long as the href is the labeled the same as the lightbox-target id it should work.

    Like the examples below:









    Reply to Simon

    1. Simon

      Simon

      Jun 13, 2016
















    2. Simon

      Simon

      Jun 13, 2016

      Hmmm, the code does not seem to be showing up.

    3. Simon

      Simon

      Jun 13, 2016

      a class="lightbox" href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#1_b">
      img src="1_b.jpg"/>
      /a>
      div class="lightbox-target" id="1_b">
      img src="1_b.jpg"/>
      a class="lightbox-close" href="home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/#!">
      /div>


  59. Mikkel Nielsen

    Mikkel Nielsen

    Jun 17, 2016

    i tried to use the code and it works well but the X to close is partly hidden by the scroll bar so how do i move the X button???

    Reply to Mikkel

    1. Mikkel Nielsen

      Mikkel Nielsen

      Jun 17, 2016

      i fixed that problem now my problem is there is a white line at the left when you open the lightbox before everythings els is black marked over or what you will call it

  60. Oksana Romaniv

    Oksana Romaniv

    Sep 23, 2016

    Thank you for your tutorial! At first I wanted to use wp plugin for making lightbox but I fond myself struggling to configure it for my need. I was afraid to make this myself cause I'm a complete beginner. But this approach is so logical and clear that even I could make it work at my website (he-he). Thank you for sharing!

    Reply to Oksana

    1. Verbin

      Verbin

      Mar 17, 2017

      Hi there!

      I think this has been inspired by your example: https://madmurphy.github.io/takefive.css/

  61. Farah

    Farah

    Jun 12, 2017

    This is totally dope. But i have a little problem here. How to make the lightbox become small a little bit because my header is blocking the 'X' which is to close the image that i had clicked. Please respond to my problem. Thank you.

    Reply to Farah