Html css

Hello, Mustapha! 👋

Regarding your question, we need to get the HTML right first.

• Wrap the img element with an interactive element. You can wrap it with an anchor tag.
• Then, add alternative text to the image. The alternative text should be the label for the link. So, if the href attribute is the file path to the image then the alternative text is "Preview Equilibrium".

After that to create the overlay, I recommend creating it with pure CSS using pseudo-element and background properties.

• First, create a pseudo-element from the anchor tag.
• Make the pseudo-element fill the entire image.
• Lastly, on hover (a:hover::before), add the cyan background color and the eye icon.
• For the cyan background color, use hsla (or rgba) color format to control opacity.

That's it! I hope this helps!

Hello, Mustapha Farouk Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <main> to wrap your code, instead of section. like

<main class="body"></main>

This would help improve accessibility.

• in the body box-shadow is box-shadow: #0c1627 0px 14px 28px, #0c1627 0px 10px 10px;

• active-state of img

<div class="item">
      <a class="hover-effect" href="#">
       <span class="hover-effect-container">
          <span class="hover-effect-icon ">
            <span class="top-icon">
              <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                </path>
              </svg>
            </span>
          </span>
        </span>
        <div class="p-2">
          <div class="ethereum-logo">
                <img class="equiLImg" src="images/image-equilibrium.jpg" alt="equilibrium">
         </div>
        </div>
      </a>
    </div>

• hover effect

.item {
    overflow: hidden;
    position: relative;
}


.hover-effect {
    display: block; 
    overflow: hidden;
    position: relative;
}

.hover-effect:before {
    background-color: rgba(44,45,48,0);
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}


.hover-effect-container {
    left: 50%;
    position: absolute;
    top: -1.25rem;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: .4s;
}

.hover-effect-icon {
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    text-align: center;
}

• active-state of h3 & p span

.title:hover, .h3:hover{
    cursor: pointer;
    color: #25e6eb;;
}

a small transition will be more attractive.

• Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

• this is my solution of this challenge live,repo

I hope it will work. Happy coding.