using flexbox

Community feedback

• 

  P

  Nadji CHABANE•500

  @CHBNDJPosted 13 days ago

  Hi nice design job just i can give you some tips for the background-color on th img when the hover is used thats what ive done .img-logo { width: auto; height: 302px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden;

  }

  .img-logo img { width: 100%; height: 302px; border-radius: 8px; display: block; }

  .img-logo::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00FFF8; opacity: 0; border-radius: 8px; transition: opacity 0.3s ease; }

  .img-logo::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-image: url('data:image/svg+xml;utf8,<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="%23FFF" fill-rule="nonzero"/></g></svg>'); opacity: 0; transition: opacity 0.3s ease; }

  .img-logo:hover::after { opacity: 0.5; }

  .img-logo:hover::before { opacity: 1; }

  0