Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

2 efekty hover nałożone na siebie

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

2 efekty hover nałożone na siebie

Post 29.01.2017, 15:00:43

Witam, próbuję uzyskać efekt hover taki jak na głównej stronie sklep-domwhisky.pl (np "grawer na butelce" czy "jack daniels set". Po najechaniu myszką zdjęcie przybliża się a umieszczony na nim napis się pomniejsza. Przygotowałem dwa zdjęcia, jedno jako tło drugie jako napis w png.
banner - div główny, crownr - zdjęcia tła, które ma się przybliżyć, crownr-text - zdjęcie napisu w png, które ma się pomniejszyć.
Problem w tym, że czego bym nie zrobił zawsze działa jeden efekt hover. Być może ktoś wie jak sprawić aby oba elementy reagowały jednocześnie?
Poniżej kod css:

.banner {
display: block;
position: relative;
}
.banner:hover .crownr img:hover {
transform: scale(1.2);
transition-duration: 1s;
}
.banner:hover .crownr-text img:hover {
transform: scale(0.8);
transition-duration: 1s;
}

.crownr {
border: 10px solid black;
overflow: hidden;
display: block;
position: relative;
width: 700px;
height: 543px;
}

.crownr-text {
overflow: hidden;
display: block;
position: absolute;
bottom: 0px;
left: 0px;
}

HTML:
<html>
<head>
<title>Hover pozniej zmien nazwe</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Hover pozniej zmien nazwe</h1>
<div class="banner">
<div class="crownr">
<img src="D:\ALKOHOLE\strona\efekty hover\zdjecia do hover\crown royal.jpg" alt="crown royal">
</div>
<div class="crownr-text">
<img src="D:\ALKOHOLE\strona\efekty hover\zdjecia do hover\crown royaltext.png" />
</div>
</div>

</body>

</html>
Przzemo
Posty: 2
Dołączył(a): 29.01.2017

Re: 2 efekty hover nałożone na siebie

Post 29.01.2017, 19:05:05

Rozwiązane, można usunąć.
Przzemo
Posty: 2
Dołączył(a): 29.01.2017


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 8 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 49632 zarejestrowanych użytkowników.
Najnowszy użytkownik: KashaCzq


Nasi użytkownicy napisali:

  • 933822 wiadomości
  • w 245890 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)