Html css

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  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!

  Marked as helpful

  2

  ---

  

  Farouk Mustapha•230

  @Farouk-ayoPosted about 2 years ago

  @vanzasetia Thank you for the tip. i got it fixed now

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @eff-r-k

  You are welcome!

  I expected that you would use background-color for the cyan background color since it is not a gradient color.

  Also, what is the purpose of opacity: 3? I tried toggling it and it looks like there's no difference whether or not the opacity exists.

  0
• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  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.

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @faha1999

  Hey, Kawsar! 👋

  Why do you suggest implementing the hover effect that way?

  I took a look at your solution for this challenge. I noticed that you managed to implement the hover effect of the image in a much more straightforward way (by using pseudo-elements).

  Also, what is the purpose of the data-overlay="rgba(52,58,64,.6)"?

  Then, the anchor tag needs a href attribute otherwise it is not an interactive element. If it is for internal navigation, there is no need for target="_blank" rel="noreferrer" attributes. Use those attributes only when the link is navigating to another website.

  0

  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  @vanzasetia

  Hello Vanza Setia,

  My dev setup is for react. So when I use anchor tag its by default set target="_blank" rel="noreferrer".

  I used data-overlay for another project. There have some complex hover effects.

  Now, I've to recheck my solution to this challenge.

  And thanks for your cooperation.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @faha1999

  Your dev setup has nothing to do with this solution. Also, it looks like the other project has nothing with this solution.

  I still don't understand why are you suggesting this approach to the solution author.

  0

  

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  @vanzasetia

  Firstly, I find that this is the best way to apply the hover effect as a newbie. Also, this approach is a bit understandable.

  Secondly, there is no official solution for front-end mentor challenges. I solved this challenge with this approach, you solved it with another approach. End of the day we are doing the same things but in different ways.

  ​I hope you understand it.

  0

  

  Farouk Mustapha•230

  @Farouk-ayoPosted about 2 years ago

  @faha1999 this really helped. Got to know what i was missing out. i now got the issue fixed.Thank you.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @faha1999

  I understand your first reason and I think it's a good reason. 🙂

  For your second reason, based on the URLs that you shared, you were creating the hover effect with a different approach. You were using pseudo-elements to create the overlay while the one that you suggested was using HTML markup and some CSS.

  0