• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

problem z transition transform - pojawiające się tło

Aruba Cloud - Virtual Private Server VPS
0 głosów
235 wizyt
pytanie zadane 20 września 2017 w HTML i CSS przez mola85 Początkujący (320 p.)

Witam, chciałabym  osiągnąc taki efekt: po najechaniu myszą na na kulę w środku  pojawia się jakby jej tło - coś w rodzaju okręgu. Myślę że mogę uzykać efekt za pomocą transition, transform. Jednak nie za bardzo wiem jak rozpisać kod tak aby po najechaniu na zdjęcie z kulą pojawiło się jej tło - czyli zdjęcie z okręgiem. Kod I zdjęcia poniżej. Dziękuje za odpowiedż.

html

<div class="grupa">
	<img class="okrąg" src="okrąg.png">
	<a href="#"><img class="kula" src="kula.png"></a>
</div>

CSS

.grupa{
	
	margin-top:50px;
	margin-left:-125px;
	left:50%;
	position:relative;	
}

.grupa .okrąg{
	position:absolute;
	width:250px;
	height:254px;	
}
.grupa .kula{
	width:70px;
	height:69px;
	position:absolute;
	left:90px;
	top:92px;		
}


 

 

 

2 odpowiedzi

0 głosów
odpowiedź 20 września 2017 przez imklau Nałogowiec (42,090 p.)

możesz ustawić dla tego tła na początku opacity: 0 i kiedy ktoś najedzie na "kulę" to dajesz opacity: 1.

Z tym, że zamień sobie miejscami te dwa elementy w HTML, żeby kula była pierwsza. Dodatkowo ona jest w <a> więc tak naprawdę powinieneś użyć a:hover + .okrąg i tam dać opacity: 1,

ps. staraj się unikać nazw klas po polsku ;)

0 głosów
odpowiedź 20 września 2017 przez Wujek Greg Dyskutant (9,410 p.)

Po pierwsze po co <a> w środku? Jeżeli chcesz aby kula była linkiem to lepiej będzie jak zamienisz diva .grupa na link, wtedy cały obrazek będzie linkiem.

Po drugie jeżeli chcesz żeby po najechaniu na kule pojawiał się okrąg to wystarczy że dla klasy .okrąg nadasz właściwość

.okrąg{
  opacity:0;
}

a dla klasy grupa:

.grupa:hover > .okrąg{
   opacity:1;
}

Do tego oczywiście musisz wykonać odpowiednie pozycjonowanie, tak aby obrazki do siebie pasowały

komentarz 20 września 2017 przez mola85 Początkujący (320 p.)
dzięki za odpowiedż - działa - super!

Podobne pytania

0 głosów
1 odpowiedź 307 wizyt
pytanie zadane 16 maja 2021 w HTML i CSS przez Tetsu99 Nowicjusz (200 p.)
0 głosów
1 odpowiedź 275 wizyt
0 głosów
2 odpowiedzi 250 wizyt
pytanie zadane 17 kwietnia 2017 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...