How do I align images in center and overlay text on hover? - html

Question

I'm trying to create a horizontally scrolling image gallery and I am having trouble centering it in the middle of the window. I tried to add display of flex to the body and do it that way, it didn't work for me.
I'm new at flexbox so I'm not sure if I'm doing this right, I'm just looking for an overall constructive criticism and guidance.
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 2em;
}
.wrapper {
display: flex;
flex-direction: row;
}
img {
min-height: 400px;
max-height: 420px;
display: flex;
padding-right: 2em;
}
<div class="wrapper">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
</div>
Here's the example on Codepen.

Answer 1

In order to center a div on the screen, you can change the top property as shown below:
.wrapper{
display: flex;
flex-direction: row;
position: absolute;
top: 20%;
}
And to hide horizontal scrolling you can do this:
html, body{
width: 100%;
height: 100%;
overflow-y: hidden;
}
To overlay text on an image when you hover:
<div class="img_container_1">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: inherit;
width: inherit;
transition: .5s ease;
}
.image_container_1{
position: relative;
}
.img_container_1:hover .overlay {
opacity: 1;
}
img {
min-height: 400px;
max-height: 420px;
display: flex;
padding-right: 2em;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
You can find the full demo here: https://codepen.io/anon/pen/LJRVwb?editors=1100

Answer 2

To vertically center everything in your wrapper with flexbox, you need to add align-items: center; to .wrapper.
The wrapper is also matching the height of its contents in your example, so you won't see any difference unless you give .wrapper a height.
You set body to height: 100%;, which is what makes your example scroll vertically at the moment. Removing that removes the scrollbar as long as your view is big enough to hold all of its content vertically.
Adjusted CSS:
html, body {
width: 100%;
}
body {
margin: 2em;
}
.wrapper {
display: flex;
align-items: center;
height: 500px; /* Example height */
flex-direction: row; /* It's this by default, so you could remove this if you want */
}
img {
min-height: 400px;
max-height: 420px;
padding-right: 2em;
}
I made an adjusted example on CodePen that works for reference: https://codepen.io/happikitsune/pen/rZMOWO