<div
        class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs"
        data-mdb-ripple="true" data-mdb-ripple-color="light"
      >
        <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
        <a href="#!">
          <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-100 transition duration-300 ease-in-out" style="background-color: rgba(251, 251, 251, 0.2)"></div>
        </a>
      </div>

      Javascript language logo
      your recipe card header background
      Hover Effects

      Tailwind Components

      The code contains two divs. The first div has a class of "relative overflow-hidden bg-no-repeat bg-cover max-w-xs", which will make it disappear if it covers any other part of the page. The second div has a class of "absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-100 transition duration-300 ease-in-out". This will create an absolute positioned div that will take up the whole screen and will be hidden until the user hovers their mouse over it. The background color is set to rgba(251, 251, 251, 0.2).

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.