Lightbox using just HTML/CSS

Hey guys! I am trying to use lightbox and the pop up window when i click my images is tiny as, any ideas on how i would adjust this?

As most of us don’t possess crystal balls, the code you’re using, or a link to your site, would be a big help here.


oh haha soz i have also been wonder what is the best way to do this? you know besides having it live on a server xD

i am a new user so i cannot post attachments xD thought some1 may have experienced this before and might know something off the top of their head xD

You can use CodePen or JSfiddle, or simply post your code here.

When you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

Not any more. (You can tell, because your name has changed from grey to light blue.)

0.o thanks! dangit my file is 300kb to big xD

Are you trying to upload a zip file with everything, including images? If so, you could either upload the images in a separate zip, or replace them with placeholders of appropriate sizes from an online site. (Naturally, I tend to favour )


okie dokie thanks =) (11.0 KB)site_root - (551.2 KB)

omg i think it had like ghost copies of old stuff i deleted in the images folder xD take out images folder put it back in zip again and it goes from 3000kb to 563 xD

omg i am so silly haha i am using tiny sized images -.-

1 Like

I’d just reached the same conclusion.

There’s nothing quite like posting publicly to help you realise you’ve been a complete numpty. (We’ve all been there, so don’t feel bad about it - and at least you’ve learned how to post code, for future reference. )


yes thankyou for your help TechnoBear =)

1 Like

I see your lightbox displaying the native image size 139 x 105.

Then on your actual image in the photo page I see the native size being altered in the img attribute

<img src="img/1.jpg" alt="Glass Bottom Boat &amp; Governors Island" class="img-rounded" width="200px">

By the way, px is not needed on the width/height attributes, it is invalid.
It should be… width="200"

If you want your lightbox images larger then it’s needs to target a larger version of the image, not the thumbnail.


Thank you ray as always I love your input =) thanks for the tip!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.