I think with the placeholder text it looks just alright. However I don't think the design accounted for the content growing in size. Or I might have just glossed over it lol. How would you do it? Flexible container or truncate the text?
Something as not defining height can help for a dynamic height container
It was a challenge to imagine how to place the hover of the image.
I'm just not sure my solution is the best idea.
<div class="image">
<div class="eye-image"></div>
</div>
How to stack images and make one of them appear whenever you want?
you can have image container position as relative. The image container act as a container for the images and have two images position as absolute where both left and top is 0px or none at all because it is contained inside the div element and that eye-image sits at the bottom.
if one or the other image is on top and you want the other image to stand at the top, then you need to add z-index and set to 1.
the img width is set to 100% so that the entire image is contained in a container because the image itself is big.
I downloaded your file and tested it and it worked really well.
Here is the code which I just added a few lines of codes:
HTML:
<div class="image">
<img src="images/image-equilibrium.jpg" alt="image">
<div class="eye-image"></div>
CSS:
.image{
position: relative;
width: 285px;
height: 285px;
border-radius: 8px;
overflow: hidden;
}
.image img{
position: absolute;
width: 100%;
}
.eye-image{
position: absolute;
opacity: 0;
background-color: var(--Cyan);
background-image: url(./images/icon-view.svg);
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
You did an amazing job, tho.
This is my version of the Results summary component.
I have a question for the community. A lot of these projects require a <div></div> to be in the center of the page. As a container.
I feel my approach is not the best way. Is there a standard way to center a div in the middle of a page?
Your answers will be greatly appreciated.
As always, Happy Codding!!
A lot of it requires a container div as far as I can tell and in my own experience. Without having a container that spans both height and width, then you would more likely have to hard code it using transform: translate, margin, and etc... but hard coding are never really good and is not really responsive. The easiest solution would be having to have a container that span both width:100%, height: 100vh, and display the container to flex and then you use justification-content: center; and align-items: center;. It will display the contents to the center of the screen.
Here is a video that I like that I found in youtube made by @Fireship: https://www.youtube.com/shorts/njdJeu95p6s
