CODEWITHSUNDEEP
htmlcsshtml-lists
supm3n
supm3n

Reputation: 53

Picture not showing up right

I have a gallery where different pictures are to be shown. i wanted to do the effect that, when i click on the image it gets bigger and it stays that big as long as i click it. example

but when i click on it, it zooms in but the image gets cut off problem

i used a list for the gallery and added some css to it.

the code for the image zoom is this:

@media (max-width: 1280px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Upvotes: 2

Views: 56

Answers (1)

Odisseas
Odisseas

Reputation: 1642

It probably is a z-index issue. I am guessing that the image you click is relatively positioned (and if it isn't, you should do it). Then, simply set the z-index to a higher number and you should be fine!

Example: z-index: 100;

Upvotes: 3

Related Questions