Skip to content
OverviewSolutions
13
Comments
4
jetskeeter
@jetskeeter1

All comments

  • jetskeeter•180
    @jetskeeter1

    Something as not defining height can help for a dynamic height container

  • jetskeeter•180
    @jetskeeter1

    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>
    </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.

  • jetskeeter•180
    @jetskeeter1

    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

  • jetskeeter•180
    @jetskeeter1

    amazing