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">
<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"
>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
></span
> <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] {
width: 3rem;
}
.greeting:hover .ipa {
opacity: 0.5;
}
</style>