@polzak
@Code-Beaker
Submitted
Hello, I have a doubt on centering the .wrapper on the screen for that, I used
The .container is the parent of .wrapper
<div class="container">
<div class="wrapper">
</div>
</div>
.container {
position: relative;
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
position: absolute;
inset: 0;
margin: auto;
}
@polzak
Posted
Hello,
You've done a great job and it's a very impressive design you made!
Please let me just add another option to center the wrapper.
I downloaded your code and found that you centered it with position: absolute.
The inset: 0 means left: 0; right: 0; top: 0; bottom: 0. That would not center the wrapper in its own, but it does when it combines with margin: auto. You will find the wrapper will not sit on the center if you remove either of them. In summary, position: absolute, inset: 0, and margin: auto are making the wrapper sit on the center now.
That's fine, but you can use a simpler way to center it: flex. You can center the wrapper with flexbox, without using positioning.
.container {
display: flex;
align-items: center;
/* position: relative; */
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
/* position: absolute; */
/* inset: 0; */
margin: auto;
transition: 200ms ease;
}
Now the .container is a flex-container for a single flex-item: .wrapper. flex-direction is row, the default value, and align-items: center makes the wrapper sit at the middle on the vertical dimension. (so you will need height: 100vh for this.) In addition, margin: auto in the .wrapper style makes the wrapper sit at the center on the horizontal dimension. If you like, you can add justify-content: center in the .container style and remove margin: auto in the .wrapper style, which will create the same result.
.container {
display: flex;
align-items: center;
justify-content: center;
/* position: relative; */
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
/* position: absolute; */
/* inset: 0; */
/* margin: auto; */
transition: 200ms ease;
}
I hope this helps a little bit.
Marked as helpful
Hello,
I have completed another project. I had fun working on this and learned a lot about CSS opacity property.
I have a question about the background image not displaying when you hover over the image tag. What is preventing the background image from showing?
Any suggestion on how to improve this or my code will be appreciated. Thank you.
@polzak
Posted
Hi Paul,
You've done a great job. I see you did a beautiful design.
Just one thing, please let me tell you how you can make the icon-view.jpg image that you set as background image visible.
First, the image file path:
You can access image files with ./images/....jpg in index.html, but your style.css file is not in the root directory now. The stylesheet's path is ./app/scss/style.css; so you will be able to access image files from there, with ./../../images/icon-view.jpg: you need to come up twice, then come down into the images folder again.
Second, the tag you applied 'opacity: 0.3' to.
You set the background image on the img tag, and applied the opacity(transparent) to the same img tag: it will not work because the img tag has both its own image and background image at once. Solution: move the class .image-equilibrium up to its parent div in index.html. Then create a style .image-equilibrium:hover img, and move opacity: 0.3 into that. Now when you hover the div tag(its dimension will be the same as img tag), the opacity: 0.3 will work just on the image, and the background image on the div tag will show up.
You can see my code:
(index.html)
<main class="card">
<div class="image_equilibrium">
<img src="./images/image-equilibrium.jpg" alt="picture of equilibrium card">
</div>
<h1>Equilibrium #3429</h1>
(style.css)
.image_equilibrium:hover {
background-image: url("./../../images/icon-view.svg");
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
/* move the opacity out into the below one */
}
.image_equilibrium:hover img {
opacity: 0.3;
}
Marked as helpful