Equilibrium Card using CSS y flexbox

Community feedback

• 

  jetskeeter•180

  @jetskeeter1

  Posted almost 2 years ago

  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.

  01