Center div in every view

[ricardoaguilarm]

Hi! I’m creating a image gallery. And I’m facing some issues.
The most important is fix the “view” of the image when is open, no matter of wich view position you are in the page. For example:
if I am in the bottom of the gallery and I click in the “view ->” button (appears when you hover a image) the image will open like this:

But if i open the image at the top of the gallery, is almost centered, and thats nice:

There is a CSS or JS way to center those div depending of the view of the user?

In order to a better understandthis project let me explain what is happend:

HTML

      <div class="image-container">
        <img src="https://source.unsplash.com/200x150/?architecture,quebec" alt="">
        <button class="close">x Close</button>
        <img class="super-image">
        <div class="image__overlay">
          <button class="button-overlay">View →</button>
        </div>
      </div>

• image-container: “controls” the normal with and height of the first view of the image that you see.
• img src: The source of the image.
• close: Button that appers in the top to close the image when is fully open.
• super-image: It’s display none. then when you click ‘view ->’ it will open. Also has the maximun value of z-index in the page, just because it’s over a white background. Also controls the position (inside that white background) of that image.
• image__overlay. This is the white background, displayed only when you click the “view ->” button. Contains the ‘super-image’ and the goal is centering no mater if you are in the top or bottom of th page.
• button-overlay: the “view ->” button. Display the big image when you click it.

Note: In JS File I 'display:none" the scrollbar (overflow-y) when you display the “super-image” (big image) just for “aesthetis” purposes (and I think It’s better for UX). You can change that commenting the line 23 and 30.

CODEPEN: https://codepen.io/ricardorien/pen/ExZgpyQ?editors=1000

I Been playing with Transform Translate but I can’t find a dinamic solution.

Thanks in advance!

[MatchaCrisp]

Hi, there is in fact a CSS way to always center. It’s position:fixed.

See the codepen I forked from you then edited slightly. I’ve only touched your .overlay-inner class, changed the position, top, and left property values.

https://codepen.io/bill-ye/pen/jOyyzaP?editors=1100

A thing of note is having your .overlay-inner class be sized in viewport units may result in the contained image being cropped on certain screens.

[ricardoaguilarm]

Oh! position fixed works amazing! I would never have imagined that! I’m gonna read about that.
Thanks for your solution. Simple, and elegant.
If you don’t mind… Do you have any other advice for me and this project?

[MatchaCrisp]

Hi, sorry for the late reply.

For your coding style I’ve reviewed all of your HTML, CSS, and JS. I have to say really well done. It’s clean and easy to follow through, there are clear sections to your CSS, and HTML DOM is well structured. You may consider adding even more comments, but syntax/logic-wise you are solid.

For this project I have a few issues that I feel need to be addressed, but only one of which you may consider important.

First and most importantly, at the moment your images are able to be viewed when hovered over and “view” pops up. However hover isn’t really a thing on mobile devices and therefore you’ll need to think of a way for mobile users to use your app before developing it further.

Second and only somewhat relevant are image resolutions, the images seems quite fuzzy and doubly so when I enlarge them. Are there higher-res alternatives or different versions of the same images you have planned for different resolution screens?

Third, I’ve found myself to be quite a lazy user, in the sense that when I see a blue popup with a view button in the middle, I usually assume the entire blue backdrop acts like the view button as well. Same goes for closing the enlarged images, I assumed that clicking outside of the enlarged image would return me to the gallery. So that may be a feature you can consider.

But this is a really good looking start to a wonderful app. Congratulations and good luck going forward.

[ricardoaguilarm]

A Huge thanks!
Pardon me for reply 3 days laters, my internet connection is not good at all these days. Thank you for your compliments.

• First) Coincidentally, two days ago I added that functionality for mobile devices. No blue screen! Just pop and closes with a click.

• Second) Yes, I plan to make it work for different devices. But I have to learn more about image resolution and how to make it work!

• Third) I agree! very good recommendation. I will do it.

Thanks to you for teaching me and giving me advice.