Skip to content
OverviewSolutions
10
Comments
2
Falana John
@John-developer-18

All comments

  • Makhmud•50
    @Makhmud10Submitted about 1 year ago

    Hello everyone.

    In this challenge, I have had problem with hover of image, but I have done it with difficulty. I wonder if you give feedback to me about hover of image.

    Thanks in advance

    HTML and CSS

    1
    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
  • Falana John•150
    @John-developer-18Posted over 1 year ago

    Dear George Mwawasi, you did a great job by the way.

    1. But First I suggest checking the path of your image in your GitHub repo. Your image will not show if there is an error in the path name.

    2. Also, try as much as possible to make sure your website looks like the design file given to you. Make references to the style guide if needed.

    Marked as helpful
    0