NFT card with grid and flexbox

Community feedback

• 

  Rodrigo Vergara•680

  @UnTalPelucaPosted over 2 years ago

  Hi, I've been reading your code and it's very clean, I'm sure you'll do well in the future when you use tools like scss. In these cases I like to use ::before and ::after, to do so you have to wrap your img.card-image in a div, because these pseudo-elements don't work in imgs. Here is an example where I use ::before to create an element that is the same size as the image, has two backgrounds, and uses ::hover to make it visible.

  .card-image-wrapper {
  	cursor: pointer;
  	position: relative;
  	border-radius: 1rem; /* with this we don't have to specify */
  	overflow: hidden; /* the border radius on each element.*/
  }
  
  .card-image-wrapper::before {
  	content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      transition: opacity 0.4s ease-in;
  	background: url(./images/icon-view.svg) no-repeat center, rgba(0,255,255, 0.5);
  	opacity: 0;
  }
  
  .card-image-wrapper:hover::before {
  	opacity: 1;
  }
  
  .card-image {
  	width: 100%;
  	display: block; /* When an image is inside a div,
  	the div use an extra empty space at the bottom,
  	this solves it */
  }
  

  Marked as helpful

  2

  ---

  

  Eero Liuska•60

  @eerolliPosted over 2 years ago

  @UnTalPeluca This worked a treat, thank you very much.

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Eero, I took some time to look at your solution and you did a great job!

  You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution

  After try to add a little transition on the element with hover effect

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  0
• 

  optimusprime202•1,200

  @optimusprime202Posted over 2 years ago

  Hey @eerolli, You are learning fast.

  0