NFT Preview Card

Community feedback

• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greeting Abdulhafeez Ibrahim!! Congratulations for completing your challenge, 👏👏👏.

  they are many ways to archive that overly effect , One of the simplest ways is using CSS properties and pseudo-elements.

  for example you will need the following, a wrapper an image and icon as a decorative element

  HTML

  <div class="image-wrapper">
    <img class="eth-img" src="images/image-equilibrium.jpg" alt="Equilibrium image" >
  </div>
  

  CSS

  .image-wrapper {
  position: relative;
  background-color: hsl(178, 100%, 50%);
  
  
  /* ... */
  }
  .eth-img {
   opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  
  /* ... */
  }
  
  .image-wrapper::after {
    content: url(images/icon.svg);
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   transition: .5s ease;
  }
  
  .image-wrapper:hover .eth-img{
    opacity: 0.3;
  }
  
  .image-wrapper:hover::after {
    opacity: 1;
  }
  

  you can check out this resource to learn more.

  • https://dev.to/ellen_dev/two-ways-to-achieve-an-image-colour-overlay-with-css-eio
  • https://www.w3schools.com/howto/howto_css_image_overlay.asp
  • https://imagekit.io/blog/css-image-overlay/

  Hope this helps and give you some hints.

  Overall, Welcome to Frontend Mentor Community, and keep coding 👍.

  Marked as helpful

  1

  ---

  

  Abdulhafeez Ibrahim•20

  @TripleMZeePosted about 2 years ago

  @imadbg01 Thank you so much

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Abdulhafeez Ibrahim! 👋

  We need to get the HTML right first before improving the styling.

  • Use landmark elements. All the page content should live inside landmark elements (e.g. header, main, and footer). Users of assistive technology can navigate through landmark elements. This will help them quickly navigate a website or application.
  • In this case, the children of the body element should be landmark elements - main for the card, footer for the attribution.
  • Don't use headings for every text! I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
  • Any elements with interactivity must be wrapped with an interactive element such as an anchor tag.
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". It helps protect users of legacy browsers. I suggest reading the web.dev article to learn more about this.

  Once the HTML is done, we can start moving on to styling. First, we need to get the foundation for the styling right by using a CSS reset. I recommend using the "Modern CSS Reset" by Piccalilli (Andy Bell).

  Then, use rem for margin and padding instead of percentage unit. Using percentage units for margin and padding can lead to unexpected results on some screen sizes such as tiny or wide screen sizes.

  For the overlay, use pseudo-element and background properties. Create the pseudo-element from the anchor tag that wraps the Equilibrium image. Then, when it gets hovered (a:hover::after) add the eye icon and the cyan overlay.

  For the cyan color, I recommend using hsla color format. This way, you can adjust the opacity of it.

  I hope you find this useful!

  Marked as helpful

  1

  ---

  

  Abdulhafeez Ibrahim•20

  @TripleMZeePosted about 2 years ago

  @vanzasetia Thank you so much for this. It would really help me improve.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @TripleMZee No problem! 👍

  0