پیشنمایش زنده
کد HTML
<a
href="#"
class="group relative block max-w-screen-sm mx-auto h-64 sm:h-80 lg:h-96"
>
<span class="absolute inset-0 border-2 border-dashed border-black"></span>
<div
class="relative flex h-full w-60 transform items-end border-2 border-black bg-white transition-transform group-hover:scale-105"
>
<div
class="p-4 !pt-0 transition-opacity group-hover:absolute group-hover:opacity-0 sm:p-6 lg:p-8"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-10 w-10 sm:h-12 sm:w-12"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<h2 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h2>
</div>
<div
class="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8"
>
<h3 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h3>
<p class="mt-4 text-sm sm:text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate,
praesentium voluptatem omnis atque culpa repellendus.
</p>
<p class="mt-8 font-bold">Read more</p>
</div>
</div>
</a>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.mx-auto{margin-left:auto;margin-right:auto}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.h-10{height:2.5rem}.h-64{height:16rem}.h-full{height:100%}.w-10{width:2.5rem}.w-60{width:15rem}.max-w-screen-sm{max-width:640px}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-end{align-items:flex-end}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.\!pt-0{padding-top:0px !important}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\:absolute{position:absolute}.group:hover .group-hover\:relative{position:relative}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:opacity-0{opacity:0}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:h-12{height:3rem}.sm\:h-80{height:20rem}.sm\:w-12{width:3rem}.sm\:p-6{padding:1.5rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width: 1024px){.lg\:h-96{height:24rem}.lg\:p-8{padding:2rem}}