Create a CSS only lightbox using :target

[@ytkeebOo]

Awesome as usual. My 50 cents: to avoid jumps clicking an anchor link "#" .... I put href="#!" :)

[@KevinPowell]

How did I not know this before? I've pinned this, so hopefully others see it. I almost feel like I need to make a followup video now!

[@ytkeebOo]

@@KevinPowell To be honest, I found it somewhere digging in some online page source a long time ago and I start using it ..... at the end should be the same of #whatever_not_in_the_page but more elegant maybe? :) Anyway... waiting an update video with your clean-way we know. ;)

[@rahul.k.viswanath]

I just saw this video and was about to comment the same thing. And it was already here. Great video though!

[@TNeulaender]

Thank you! That indeed is very useful!

[@ranbuch]

You can also make the experience more fluid by adding: html { scroll-behavior: smooth; } That why it will scroll pack you the #portfolio tag smoothly instead of jumping there

[@TinyMaths]

I made my first gallery about a month back, and a few days ago decided to redesign some of it and add some extra functionality, but was getting stuck. Well, I only heard about lightboxes today after racking my brains for a day or so trying to figure out how some galleries displayed their images and had the exact address showing in the address window. Looking through what code I could find, I stumbled on some code with the term 'lightbox' in it. I wondered if that was what I was missing; did a search and, VOILA', here it is. This isn't exactly what I was looking for, but I didn't need to search further because you covered what I was confused about and I got the info I needed; glad I subbed ages ago because, for CSS, this has been a really helpful resource. Thank you!

[@NicoHeinrich]

This is insane. I love how much you can do with pure CSS. Thanks a million times!

[@kallee7284]

10:35 satisfying how the lines line up

[@joshuadickerson1540]

One of the most common lightbox features is to have the filter (the black + transparent area) clickable and it closes the lightbox. Instead of doing a close button. Or, perhaps, as well as, you can make that area a div and make it a link. Then use some z-index to position the image on top. Haven't tried that out but it seems doable.

[@soniablanche5672]

can you make the area clickable with css only ?

[@gabiold]

@@soniablanche5672 Replace the container which makes the opacity with an instead, set it to display block then you can give it the href="#!" attribute too.

[@AirForceAirguns1]

Thank you, thank you, thank you!!! This tutorial saved my bacon! Was able to follow along with the tutorial and integrate it into my own project. You are a master, Kevin! Thanks again!

[@strugglingElds]

You are my master in CSS now Man. Good job!

[@thildamoon]

Great tutorial. I wonder why you use a lot of and not ? because adding a subtitle to your is nicely done with a just something i was wondering about.

[@Banalitude]

As always, super informative! Thanks man

[@glizzard1894]

Thank you for making these videos! I learn faster doing things hands-on. Your explain each step thoroughly and before I know it, the project is done! Great job!

[@iplayddr3789]

youre such a great teacher. doing TOP and i've learned so much from your channel

[@salmanmurtaza2889]

To avoid the scolling , all you need to do is to set the value of href it has the same class name of its parent element .portfolio-lightbox. This is the easiest solution that i found

[@benlamineabdelmourhit4839]

I am not a bigginer in CSS but i like to watch your videos, i was looking for one about media print i didn't find it in your channel, i think it's a good suggestion to talk about using CSS for printing.

[@mariocarnival]

Nice, just add a Part 2. How to add narrows to right and left, so the users on a mobile can slide the pics to the next or previous image avoiding going back to the general gallery.

[@Allformyequine]

Really great stuff, luv it!! Keep them coming!

[@lucasm.1297]

Thanks for the creative solution, I subscribed to your channel. Keep uploading quality content!

[@neeleshgaur8424]

Gentlemen, I really like all the stuffs that u are providing!!!

[@KevinPowell]

Thanks! I'm glad to hear that 😁

[@baguetteengineer]

Helped out a lot with a project I worked on for school. Thanks for the help!

[@nomadshiba]

ok this is an old video but at 24:00 i would say .portfolio-lightbox:not(:target) { transfrom: scale(0) } so the query block that is styling it would be one and only job of the other query block would be hiding it. which is a lot more organized and also u can use checkboxes or radio bottons and labels instead of hastags if you were to design something that is not filling to whole screen

[@pchiare]

Thank you! Can't wait to try it!

[@nikhiltyagi1080]

Can't wait for tomorrow! New 5 minute Friday!!!

[@hightower200]

I think if you add a left and right to Target the previous and next # is also possible with this option.

[@abhishs5119]

Hey Kevin , Great Tutorial. Helped out a lot in my project. Thanks

[@KevinPowell]

Glad to hear that it helped!

Amazing solutions are popping in my head. Thanks, man!

[@seanc.5310]

José Dias Neto 🤯

[@raghavmalhotra710]

Great content man, keep it up :)

[@KevinPowell]

Thanks!

[@toma1610]

Too many divs. Is it possible to have just one big container with a dynamic variable like “$mainPicture” and a list of pictures on an array, so for every click on a thumbnail, we can see the big version of the thumbnail? And also narrows left and right to see the next or previous pictures, using indexed arrays?

[@legalsolutioninodia4535]

Can we add pre and next button to this light box design

[@Victor_Marius]

Hey, for the close button / link, what if you have a fixed element with opacity of 0 and no content. The z-index is not quite needed.

[@A_Lesser_Man]

i wonder what would happen to the scroll position if you pointed the close button target at an invalid target...

[@amiralibasic151]

when i put my own images it dosen`t fit like yours and they are not looking good when i use smaller window , can you please help me ?

[@SalamoYemen]

Thanks Kevan This good learn for lightbox with css only.

[@KarlOlofsson]

Why does the close::after work for content? Shouldn't it be either to the right or below the red circle? What happens if you simply put the 'X' code in the .close class directly?

[@KevinPowell]

::before and ::after don't come before or after that element, but before or after any content within that element. Since it's only decorational, no need to have it as actual content in the element :)

[@KarlOlofsson]

@@KevinPowellok, I just find it a bit confusing decorative or not, would probably put it in the markup for the element. Unless I miss a problem doing it like that?

[@nathancornwell1455]

So, if you put an arrow icon and made it a link to the next portfolio item you could essentially make this into a slideshow , correct?

[@KevinPowell]

Good question! I think that would work, though it might be a bit jarring as I *think* one would shrink and the next would grow out at the same time if you used the same CSS that I did here.

[@nathancornwell1455]

@@KevinPowell hmm well, im gonna have to tinker around with it then and see what i come up with.

[@obNiall]

Nice job kev!

[@aram5642]

Even though that the goal was to build a no-js solution, I would be perfectly fine with adding "return false" or "preventDefault()" on the close button - for a good cause.

[@virtualhorsesport9175]

very nice, going to try and mod this for a vimeo video playback. Question though, when you close the lightbox, it jumps downward. how do you stop that?

[@roglius]

Would this work for video content? Like a popup video player for something sourced from youtube or vimeo?

[@sampson1952]

Is there away, without JS, to have the image open up from the location of the thumbnail?

[@KevinPowell]

I think if you nested the 'lightbox' inside the original div that it would.

[@dskurth]

lovely. Couple of question, as I try to modify this into a single column and presenting a vimeo video link instead of images. I will need some javascript for the actively, but I have a couple of question. When you close the box, how do you keep it from jumping downward? I need it stay in the same place but just re-display the page behind.

[@rathernotdisclose8064]

Definitely neat. I'd still rather avoid the pitfalls and use JS for a lightbox system, but I bet this target mechanic could be used for some pretty cool stuff other than lightboxes.

[@KevinPowell]

For sure! And as some people have pointed out in the comments, if we change the target to something that isn't valid (say #! or #_) it prevents the jump.

[@rathernotdisclose8064]

@@KevinPowell O shit.. Even better lol.

[@DeniWassulmaier]

Ver cool. But i cant understand how "click" works with no js?

[@izybit]

The X is a link to nowhere so when clicked the :target forces the url to change and the change hides the image. Watch again around the 19:00 mark.

[@379rale]

The problem with using :target for this, is that now clicking Browser Back will go to the last URL. So, if you are trying to go back to the previous page, you will open all of the images and visit all of the links you clicked on

[@promiseokafor5000]

Kevin how cool are you... You're too good my man.... I'm like your biggest fan

[@smyLor__________________]

Thank you so much for this great tutorial! I've been trying to learn the basics of web development as of late, but I'm still not very comfortable with JS :/ There only one or two parts of the tutorial where I felt as if I was just copying, which is down to how much knowledge I have, but overall it was super informative. Thanks once again!

[@ranbuch]

Nice! Do you mind making one about scroll-snap-type?

[@KevinPowell]

I'm pretty sure I used it in a video at one point, but I never actually made a video specifically on it, which I should do! It's been added to the list.

[@ikirachen]

why not closing link to point to the id of the item (e.g. protfolio-item-[1,2,3...]) #suggestionOnTheFly #notTested

[@abdulrehaman2406]

I don't know how you do this. You are a mInd reader. I was facing the same problem yesterday where i did not want to add a lightbox js dependency in my project and i was thinking of other ways to achieve this. Also your intersection observer video was also launched the next day when i was facing problem the previous day 👍🏻

[@anyzzas7149]

Could you please make a video on Negative Margins? Thanks in advance!

[@Protoscribe]

Like number 5 before the video even starts... Why? Because Kevin is great every video!

[@KevinPowell]

Hah, I feel like one of these days I'm going to disapoint you, lol

[@Protoscribe]

@@KevinPowell I very much doubt that, however, if you do, I will still buy you a beer :-P

[@j.almadhaji]

thanks Kevin awesome video

[@sirinongorur5676]

Great video! New subscriber here and looking forward to see more content!

[@KevinPowell]

Welcome aboard!

[@danielarodriguezminsky9643]

Everything was going so well... :( : Do you know why my Sublime Text 3 doesn't read the target pseudo class?

[@nakosmiltiadis8284]

Thank you for your videos! , Are the images visible from google crawling?Should we do something else to be sure that google see and evaluate the destination images, and not only the thump on the front?

[@KevinPowell]

They're in the DOM so they shod be indexed by google

[@nakosmiltiadis8284]

@@KevinPowell thank you

[@derekkennon7839]

amazing been looking for something like this 10 thumps up.

[@javascriptwar9525]

🙌Awsmmmmmmm sir i was not think if only using css we could developed light box including i learn about target selector..❤ .. from india..🙏 but the repeatation is more we have to create lightbox for each image-box..

[@ernestogutierrez5684]

so timely!

[@babakmantera1179]

Is is possible to use auto flex grids for big projects?

[@KevinPowell]

Yes :) - You'll have to consider fallbacks and a few other things, but companies are doing it! xotv.me/channels/22-important/vod_videos/1205-important-slash-slash-basecamp-dot-com-css-grid

[@dandange]

Already liked without even go through the video

[@seanc.5310]

What if after 10 seconds in he just left to take a 💩?

[@Diavire]

Looks good and might actually be just right for what I want to do, just to check if I understand correctly though; this method would load all the thumbnails and large images on page load, right? If that's the case, especially for larger portfolio's, that might be bad for mobile users. I don't support there's some trickery that would allow the images to only be loaded when they're actually shown? (That is, if I understood it correctly in the first place.)

[@Diavire]

Also seems like if the "popup" image is taller than the viewport, it'll still only look at the width and cut off the top and bottom of the image, and also push the close button above the visible screen. I commented out the "width: 75%;" value from the "portfolio-lightbox__content" and added "max-height: 75vh; max-width: 75vh;", seems to "fix" it, though when moving to less tall viewports the title and such loses its dark background. To me that's not an issue since I'll probably not have that info there in my case, so I haven't looked at how to adjust that yet :P Lemme know if I'm way off target here ;)

[@KevinPowell]

If the total height is taller, it would be an issue because of the 'position: fixed;'. Adding a set height to it (like you did) could give it a scrollbar that overcomes that issue though :). Yes, everything would be loaded right away, and yes, that could be an issue for performance. You could use lazy loading... I don't have a video on it, but I just added that to my todo list :D

[@sapien6768]

Loved it.

[@TNeulaender]

Sorry I'm a huge CSS noob (which makes your videos very valuable!), but wouldn't it be possible to use checkboxes and the :checked attribute? I'm just fantasizing and am imagining it like so: We have a div which contains the thumbnail and small-text as well as (hidden) the lightbox and description text. The smalltext could be wrapped in a label (to be clickable). When the attribute :checked is given the "sibling" (I think the ~ or + operator - I still don't get the difference :D) will appear and the checkbox (as it is checked) will get a new z-index and position. I don't know if it's possible, but if I imagine it right, it can even be scalable without giving away to many custom IDs.

[@KevinPowell]

Sounds like it should work, that's how I do mobile navigations these days :)

[@erykkryszewski5803]

awesome content. but the only problem i see in your videos is the volume. one time it's very loud, another video is silent and sounds like u were behind the glass or sth (like the beginning of this one). nevertheless this chanel is really helpful and well-done

[@KevinPowell]

I'm terrible with figuring out my audio to start with, and if you're watching my old and new ones it'll be more inconsistent, so sorry about that. You'd think after 2-years I'd be better at this.

[@erykkryszewski5803]

@@KevinPowell as soon as the coding stuff is awesome I can watch it even with no sound :D

[@bryan2728]

Wow excellent

[@holysign4633]

Hey everyone, does anyone know how to change css property using jquery based on screen responsiveness. Means a certain css property will be applied only if the screen size is bigger or smaller than certain pixels using jquery.

[@marissasmith3657]

I'd create a separate class containing what property you want to change, use an if statement to say something like if(window.innerWidth

[@marissasmith3657]

I realized you said "change the class" after I replied, so you might use something like .toggle instead of add

[@holysign4633]

@@marissasmith3657 thanks, does that work with vanilla JavaScript too?

[@marissasmith3657]

@@holysign4633 yes everything I wrote is the plain js way of doing it, to transfer over to jquery it would just be a matter of changing some words/syntax maybe

[@holysign4633]

@@marissasmith3657 thanks a lot mate for ur time and help..i will try it.

[@RickWolfff]

For close button, rather than an X, a multiply symbol: ×

[@RickWolfff]

Uh-oh. I tried this after I suggested it. It doesn't work! I wonder why.

[@nicholasfactor]

@@RickWolfff just copy and paste the symbol × instead of × it works fine

[@MontyKsycki]

Thank You!!! :)

[@ernestogutierrez5684]

@18:50 - it's ok we know what you're trying to... rught...roght....right.

[@AhSoh7091]

hi guys i just learning the css why .portfolio-lightbox setting the width and height it cause able to move to center when align-items & justifity-content is wrote

[@KevinPowell]

align-items works on the cross-axis (vertically), and justify-content works on the main-axis (horizontal). You can align things to the left, right, stretch them across an axis, or center them :)

[@AhSoh7091]

@@KevinPowell cool. thks for teaching! learning a lot css skills from your video.

[@dssemulate]

I use the hash #_ to deactivate my lightbox/modal to prevent jumping, but any random hash will do the trick.

[@KevinPowell]

Someone else beat you too it by a little bit! I don't know how I didn't know this though!! Thanks for mentioning it :D

[@WAMProducties]

you don't have to do five minute fridays on fridays, just like you can eat friday afternoon soup on other days than friday also is it just me or does 'No JS' sound a lot like 'Node JS'.

[@KevinPowell]

It does sound like it, hah. A little different though :P. I do have to do them on Friday's though, because if I don't schedule things, they won't happen, lol.

[@neeleshgaur8424]

WOW What a Shirt!!!

[@KevinPowell]

Thanks :)

[@neeleshgaur8424]

@@KevinPowell I have wear such a shirt in my old days:)

[@SaleKnezevic]

A-wesome !

[@SubrataDas-sb2bw]

It was a good video

[@AJ-jj1gs]

Why is youtube more informative then a paid college course at an accredited institution? Too bad my html course never taught us how to utilize all of these attributes to their full potential and give us the ability to create something such as this.

[@Take-the-Ticket]

This is going to come in very handy for spicing up my drug market on the dark web. It seems like no one uses javascript over there...

[@KevinPowell]

Haha. I'd guess it's because of the possible security vunrabilities. Better to be safe than sorry over there :P

[@behnam_salehi]

cool

[@alimahdi6379]

I wish I could hit like multiple times 💐

[@KevinPowell]

Thanks Ali :)

[@mohamedroyer7027]

Hello

[@sebastianwillsen981]

hahahaha your face

[@mumbaitiger]

Awesome video. May I have your email id

[@KevinPowell]

[e-mail] :D

[@danhemsley]

#0

[@MontyKsycki]

Thank You!!! :)