HTML and CSS

Hey Makhmud. I just went through your code and I must say you did a pretty great job. However, in other to achieve the same result with minimal difficulties. Here are some guidelines.

• Create a parent div that would contain both the equilibrium image and the view svg let's call it section-one-container.

• Then create a div for both the equilibrium image and the view svg

  <div class="section-one-container"> 
     <div class="equilibrium-container">
       <img src="equilibrium.png">
     </div>
     <div class="view-container">
        <img src="view.svg" alt="">
     </div>
  </div>
  

• For the CSS set the equilibrium-container position to relative

• Also set the view-container to position absolute so it can be positioned relative to the equilibrium-container.

• To center the view svg, we can set the display: grid and the place-content: center,

 equilibrium-container{
   position: relative;
   width:400px;  /*Set the equilibrium image to 100% so that it can automatically align with 
   The width of the equilibrium container */
}

view-container{
   position: absolute;
   top:0;
   bottom:0;
   right:0;
   left:0; /*Setting all the values to 0 will automatically stretch out the view container */
   display: grid;
   place-content:center; /*This will center the view svg*/
   background-color: cyan;
   z-index:100;
   opacity:0;
   transition: opacity 0.15s;
}
.view-container:hover{
   opacity:0.5;
{
 
I Hope this was helpful