Merhaba, CSS ile basit bir örnek yaparak hem pratik yapmış olurum hem de bilgilenirim diye basit bir profil kısmı yapmak istedim.

Projeyi sinirden kapattığım için ne yaptığımı tam olarak hatırlamıyorum.

Bir div açıp "profile" verdim daha sonra onun içinde bir img açtım ve "profile" divinin içinde "profile-stng" adında div açtım.

Amacım bir resim olması ve resmin üzerine gelince yani CSS'de hover olunca alta doğru bir küçük bir şeyin açılmasıydı ve onun içinde de "Profil Ayarları" gibi şeyler yazacaktı.

Bu konuda ChatGPT'den yardım almaya çalıştım ama o beni daha çok sinir etti. Dediği şeyi yapmama rağmen düzelmiyor ona söylüyorum hala bana aynı şeyi söylüyor delirdim.

Sorun ise şöyle:
Ben bu işlemin animasyonlu olmasını istiyorum. Bu sebeple transform ve transition özelliklerini kullanmamı söyledi.

O konuda bir sorun yok tamam kullanıyorum fakat bu kez profil resmi sola doğru gidiyor ne yapsam bunu çözemedim.

Her neyse, ChatGPT ile olan sohbetler kaydediliyor bildiğiniz gibi. Tekrar okuduğumda en son böyle bir CSS kodu vardı.

.profile {
    position: absolute;
    right: 0px;
    top: 0;
    padding: 30px;
}

.profile img{
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
}

.profile:hover .profile-stng  {
    position: relative;
    background-color: #eee;
    padding: 5px;
    display: block;
    transform: scale(1);
    text-align: center;
    border-radius: 20px;
    animation: slide-down 0.5s ease-in-out;
    width: 100px;
    height: 200px;
}

.profile-stng {
    position: relative;
    top: 20px; /* profil resminin yüksekliği */
    width: 100px;
    display: none;
    animation: slide-down 0.5s ease-in-out;
}

.profile-stng p {
    position: relative;
}


.profile-stng p:hover {
    position: relative;
    transform: translateX(10px);
}


@keyframes slide-down {
    0% { transform: translateY(-20%); }
    100% { transform: translateY(1); }
}

Kısaca, istediğim şey aynı Prototürk sitesinde olan profil kısmı gibiydi.

https://i.hizliresim.com/34rcccb.jpg

Bana yardım edebilir misiniz?