NFT preview card with pure HTML & CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Carson, congratulations dor the challenge.

  I same double about how to change the color of the SVG on hover one month ago when I did this same challenge.

  I know three ways to solve that :

  1. Using the property filter in the svg and applying the value for the color you want, in this case theres an online tool that calculate the exact color. Link below:

  CSS Filter Color: https://codepen.io/sosuke/pen/Pjoqqp

  2. Create two svg one white and the other with the hover color and swap them using a pseudo-element like :before/:after.

  3. Working with SVG and converting to a path to them apply the property fill and change its color. Useful articles below:

  CSS TRICKS how to svg color change: https://css-tricks.com/change-color-of-svg-on-hover/

  How to convert SVG to path https://stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file#:~:text=If%20you%20have%20a%20complex,them%20into%20a%20single%20path.

  In this case I've used the CSS filter generator because its easier to apply, you can check my solution to see how I did it.

  Solution: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  I hope ir helps you, feel free to ask anything 👏✌️

  Marked as helpful

  1

  ---

  

  Carson'L•100

  @Carson3377Posted over 2 years ago

  @correlucas Thanks man for your assistance too, I've tried yours as well. Highly appreciated!

  1
• 

  Bhushan•150

  @lurnfxPosted over 2 years ago

  You should use a div on your Image div then set your image div as a relative position and the other div as an absolute position then you have to bg color to as specified and change the opacity so that it can give you that transparent look Note: use the hover property for the first div and set its visibility property as visible and when not hover set to hidden.

  0

  ---

  

  Carson'L•100

  @Carson3377Posted over 2 years ago

  @lurnfx so how many div for it?

  0

  

  Bhushan•150

  @lurnfxPosted over 2 years ago

  @Carson3377 I think this can help you:-

  HTML:-

  <div class="top">
    <div class="icon">
      <img src="images\icon-view.svg" />
        </div>
    </div>
  

  ---

  style:

  top{ width:90%; height:50%; border-radius: 20px; margin: 16px; background-image: url("../images/image-equilibrium.jpg"); background-repeat: no-repeat; background-position: center; background-size: 110%; cursor:pointer; position:relative;

  } .icon { position:absolute; width:100%; height:100%; background-color: hsl(178, 100%, 50%, 55%); opacity:0; border-radius: 20px; transition: opacity 0.3s ease-in-out; } .icon img{ display:flex; margin:auto; margin-top: 120px; } .icon:hover{ opacity:1; }

  Marked as helpful

  1

  

  Carson'L•100

  @Carson3377Posted over 2 years ago

  @lurnfx Thanks man for the help, you saved me, it works! Highly Appreciated

  0