responsive nft card component

Community feedback

• 

  F4Bz3•200

  @FabianWassermannPosted over 1 year ago

  Great work!

  The hover effect on the image was a tricky one, but here is how I made it. I basically made a position relative container, which contains the image and the button. The button is position absolute and contains the view icon. The ::before element on the button creates the color effect. The z-index makes sure that the icon is above the color overlay so that the icon is fully white.

  Here is the code:

  <div class="main-image-box">
    <img
      src="./images/image-equilibrium.jpg"
      class="main-image"
      alt="Equilibrium Image"
    />
    <button class="main-image-overlay-button">
      <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
        <g fill="none" fill-rule="evenodd">
          <path d="M0 0h48v48H0z" />
          <path
            d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z"
            fill="#FFF"
            fill-rule="nonzero"
          />
        </g>
      </svg>
    </button>
  </div>
  

  .main-image-box {
  	position: relative;
  	height: min-content;
  	border-radius: 0.5rem;
  	overflow: hidden;
  }
  .main-image-overlay-button {
  	cursor: pointer;
  	display: none;
  	position: absolute;
  	background-color: transparent;
  	border: none;
  	justify-content: center;
  	align-items: center;
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  }
  .main-image-overlay-button  svg {
  	z-index: 11;
  }
  .main-image-overlay-button::before {
  	content: "";
  	position: absolute;
  	display: block;
  	background-color: hsl(178, 100%, 50%);
  	z-index: 10;
  	opacity: 0.4;
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  }
  .main-image-box:hover  .main-image-overlay-button {
  	display: flex;
  }
  .main-image {
  	display: block;
  	width: 100%;
  }
  

  Keep doing!

  2

  ---

  

  Hirwa Jr•140

  @HIRWA13Posted over 1 year ago

  @FabianWassermann wow thank you so much it really was helpful

  1