<body class="flex justify-center items-center min-h-screen">
  <div class="relative group flex justify-center w-1/2 h-0 bg-center bg-cover border-2 border-gray-300 shadow-lg pb-1-2 rounded-xl bg-image">
    <div class="absolute bg-black w-full h-full rounded-xl bg-opacity-25 opacity-0 group-hover:opacity-100 tr"></div>
    <div class='absolute p-6 text-2xl tracking-widest text-white uppercase transition-opacity transform -translate-y-1/2 bg-black bg-opacity-75 opacity-0 top-1/2 rounded-xl group-hover:opacity-100'>
      Tadaa 🎉
    </div>
  </div>
</body>
.pb-1-2 {
  padding-bottom: 50%;
}
.bg-image {
  background-image: url("https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80");
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.14/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.