NFT Preview Card Component Main

Community feedback

• Account deleted

  *,
  *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body {
    display: grid;
    place-items: center;
    min-height: 100svh;
    
    background: #1B1D36;
  }
  
  .image-container {
    position: relative;
    width: 500px;
    
    border-radius: 1.5rem;
    overflow: hidden;
  }
  
  img {
    display: block;
    width: 100%;
  }
  
  .image-container::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    opacity: 0;
    background: rgba(234, 179, 8, .3);
    z-index: 9;
    
    transition: opacity .3s linear;
  }
  
  .image-container:hover::after {
    opacity: 1;
  }
  

  Here's a simple piece of code that will give you the desired effect for the hover on the image.

  Marked as helpful

  1

  ---

  

  dpiskov•50

  @dpiskovPosted 9 months ago

  @Benjihunt97 Thanks a lot! I tried it out and it works perfectly, thank you! I still need to take my time with it and try to really understand what's going in the background and understand how the code works.

  0

  Account deleted

  @dpiskov your welcome, and you can look up each piece of code to understand it better. If you have any questions I'd be more than happy to help you out.

  1
• 

  scotttabor•110

  @scotttaborPosted 9 months ago

  Hey! For being one month in your design looks pretty great in my opinion. You are ahead of me when I was only at a month. For the cyan color, look up css overlays, this is what I did to achieve the background. I don't want to give you the exact answer right way because as a fellow wannabe developer, having to figure some stuff out for yourself is the best way to learn! If you give css overlays a quick google search you will find out pretty quickly how to do them.

  Marked as helpful

  1

  ---

  

  dpiskov•50

  @dpiskovPosted 9 months ago

  @scotttabor Thanks a lot! Yes I totally agree with you that we have to learn to search for what we need, it's just a problem when you have no idea what you are searching for. For example I haven't heard of CSS Overlays so I have no way of knowing what I actually need to achieve what I need at a particular moment. So it's great that we have a community that can give each other a little push or a hint to the direction that we need to go to!

  1