Frontend Mentor | Falana John's profile

@Makhmud10

Submitted 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

Falana John• 130

@John-developer-18

Posted 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

Falana John

All comments

HTML and CSS

QR Code component using html and CSS