HTML and CSS

Community feedback

• 

  Falana John•150

  @John-developer-18Posted about 1 year ago

  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
  

  0

  ---

  

  Makhmud•50

  @Makhmud10Posted about 1 year ago

  @John-developer-18 Hi John. Thanks a lot for feedback!

  1