Card by Uncannypotato69
#e8e8e8
HTML +TailwindCSS
1<div 2 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" 3> 4 <div 5 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]" 6 > 7 <svg 8 class="h-[1.5em] w-[1.5em] duration-300 group-hover:opacity-0" 9 viewBox="0 0 48 48" 10 fill="none" 11 height="48" 12 width="48" 13 xmlns="http://www.w3.org/2000/svg" 14 > 15 <g clip-path="url(#a)"> 16 <path 17 clip-rule="evenodd" 18 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" 19 fill-rule="evenodd" 20 fill="#fff" 21 ></path> 22 </g> 23 <defs> 24 <clipPath id="a"> 25 <path d="M0 0h48v48H0z" fill="#fff"></path> 26 </clipPath> 27 </defs> 28 </svg> 29 <div 30 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" 31 > 32 <div class="items-left flex flex-col justify-center"> 33 <h1 class="text-[1.5em] font-bold leading-[0.8em]">Heading</h1> 34 <p class="text-[0.9em] font-light"> 35 Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore 36 magni repudiandae tenetur odio 37 </p> 38 </div> 39 40 <p class="cursor-pointer text-[0.7em] underline">learn more</p> 41 </div> 42 </div> 43 <h1 class="text-center font-nunito text-[2em] font-black text-purple-950"> 44 hover over the info icon 45 </h1> 46</div> 47
58 views
58 views
MIT License