show ipa on greeting hover

This commit is contained in:
Artem 2023-05-07 02:42:26 +02:00
parent 027c9b47db
commit 3f29de28f3

View File

@ -3,10 +3,10 @@ import blobHeart from "../assets/blobheart.png";
--- ---
<div class="text-center"> <div class="text-center">
<p class="font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50"> <p class="greeting font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50">
hiya, I'm <span class="text-pink-300 relative" hiya, I'm <span class="text-pink-300 relative"
>Artur<span >Artur<span
class="absolute lg:bottom-12 bottom-9 z-50 lg:text-xl text-lg lg:left-7 left-4 text-white font-medium opacity-0 hover:opacity-50 transition duration-50" class="ipa absolute lg:bottom-12 bottom-9 z-50 lg:text-xl text-lg lg:left-7 left-4 text-white font-medium opacity-0 hover:opacity-50 transition duration-50"
>/ˈar.tur/</span >/ˈar.tur/</span
></span ></span
> <img class="align-top lg:w-12 w-10 inline-block pointer-events-none select-none" src={blobHeart} alt="blob heart"> > <img class="align-top lg:w-12 w-10 inline-block pointer-events-none select-none" src={blobHeart} alt="blob heart">
@ -20,4 +20,8 @@ import blobHeart from "../assets/blobheart.png";
[astro-icon] { [astro-icon] {
width: 3rem; width: 3rem;
} }
.greeting:hover .ipa {
opacity: 0.5;
}
</style> </style>