پیشنمایش زنده
کد HTML
<div
class="relative flex h-[12em] w-[18em] items-center justify-center rounded-[1.5em] border-[1px] border-[rgba(107,33,168,1)] bg-[rgba(107,33,168,0.24)] p-[1.5em] text-lime-300"
>
<div
class="group absolute left-1/2 top-1/2 flex h-[3em] w-[3em] -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-[1.5em] border-[1px] border-[#ffffffaa] bg-[#8988885c] backdrop-blur-[6px] duration-[500ms] hover:h-[10em] hover:w-[16em] hover:rounded-[1.5em]"
>
<svg
class="h-[1.5em] w-[1.5em] duration-300 group-hover:opacity-0"
viewBox="0 0 48 48"
fill="none"
height="48"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#a)">
<path
clip-rule="evenodd"
d="M21.6 36h4.8V21.6h-4.8V36ZM24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0Zm0 43.2C13.44 43.2 4.8 34.56 4.8 24 4.8 13.44 13.44 4.8 24 4.8c10.56 0 19.2 8.64 19.2 19.2 0 10.56-8.64 19.2-19.2 19.2Zm-2.4-26.4h4.8V12h-4.8v4.8Z"
fill-rule="evenodd"
fill="#fff"
></path>
</g>
<defs>
<clipPath id="a">
<path d="M0 0h48v48H0z" fill="#fff"></path>
</clipPath>
</defs>
</svg>
<div
class="items-left duration-600 absolute left-0 top-0 flex h-[10em] w-[16em] translate-y-[100%] flex-col justify-between p-[1.5em] font-nunito text-[hsl(0,0%,85%)] group-hover:translate-y-0"
>
<div class="items-left flex flex-col justify-center">
<h1 class="text-[1.5em] font-bold leading-[0.8em]">Heading</h1>
<p class="text-[0.9em] font-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
magni repudiandae tenetur odio
</p>
</div>
<p class="cursor-pointer text-[0.7em] underline">learn more</p>
</div>
</div>
<h1 class="text-center font-nunito text-[2em] font-black text-purple-950">
hover over the info icon
</h1>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.left-0 {
left: 0px;
}
.left-1\/2 {
left: 50%;
}
.top-0 {
top: 0px;
}
.top-1\/2 {
top: 50%;
}
.flex {
display: flex;
}
.h-\[1\.5em\] {
height: 1.5em;
}
.h-\[10em\] {
height: 10em;
}
.h-\[12em\] {
height: 12em;
}
.h-\[3em\] {
height: 3em;
}
.w-\[1\.5em\] {
width: 1.5em;
}
.w-\[16em\] {
width: 16em;
}
.w-\[18em\] {
width: 18em;
}
.w-\[3em\] {
width: 3em;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
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));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
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));
}
.translate-y-\[100\%\] {
--tw-translate-y: 100%;
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));
}
.cursor-pointer {
cursor: pointer;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-\[1\.5em\] {
border-radius: 1.5em;
}
.border-\[1px\] {
border-width: 1px;
}
.border-\[\#ffffffaa\] {
border-color: #ffffffaa;
}
.border-\[rgba\(107\2c 33\2c 168\2c 1\)\] {
border-color: rgba(107, 33, 168, 1);
}
.bg-\[\#8988885c\] {
background-color: #8988885c;
}
.bg-\[rgba\(107\2c 33\2c 168\2c 0\.24\)\] {
background-color: rgba(107, 33, 168, 0.24);
}
.p-\[1\.5em\] {
padding: 1.5em;
}
.text-center {
text-align: center;
}
.text-\[0\.7em\] {
font-size: 0.7em;
}
.text-\[0\.9em\] {
font-size: 0.9em;
}
.text-\[1\.5em\] {
font-size: 1.5em;
}
.text-\[2em\] {
font-size: 2em;
}
.font-black {
font-weight: 900;
}
.font-bold {
font-weight: 700;
}
.font-light {
font-weight: 300;
}
.leading-\[0\.8em\] {
line-height: 0.8em;
}
.text-\[hsl\(0\2c 0\%\2c 85\%\)\] {
--tw-text-opacity: 1;
color: hsl(0 0% 85% / var(--tw-text-opacity));
}
.text-lime-300 {
--tw-text-opacity: 1;
color: rgb(190 242 100 / var(--tw-text-opacity));
}
.text-purple-950 {
--tw-text-opacity: 1;
color: rgb(59 7 100 / var(--tw-text-opacity));
}
.underline {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.backdrop-blur-\[6px\] {
--tw-backdrop-blur: blur(6px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
}
.duration-300 {
transition-duration: 300ms;
}
.duration-\[500ms\] {
transition-duration: 500ms;
}
.hover\:h-\[10em\]:hover {
height: 10em;
}
.hover\:w-\[16em\]:hover {
width: 16em;
}
.hover\:rounded-\[1\.5em\]:hover {
border-radius: 1.5em;
}
.group:hover .group-hover\:translate-y-0 {
--tw-translate-y: 0px;
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;
}