NFT Preview Card Component Main

*,
*::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.

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.