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

Question

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;		
}

 

 

 

Answer 1

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 ;)

Answer 2

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

Comments

dzięki za odpowiedż - działa - super!