Animacja kwadratu

pytanie zadane 19 maja 2018 w HTML i CSS przez drzeszutek7 Nowicjusz (160 p.)

Witam,

chciałbym zrobić taki efekt jaki jest na tej stronie, gdy się najedzie na te kwadraty z logiem drużyny, kwadrat wtedy sie rozjaśnia i pojawiają się na nim nicki graczy:

https://www.hltv.org/events/3711/adrenaline-cyber-league-2018

Ktoś coś? :)

2 odpowiedzi

odpowiedź 19 maja 2018 przez Chess Szeryf (76,710 p.)

body{ 
	margin:0;
	padding:0;
}
.square{ 
	width:100px;
	height:100px;
	border:1px solid black;
	margin-left:auto;
	margin-right:auto;
}
.rectangle{
	margin-top:-10px;
	background:green;
	width:100px;
	height:50px;
	
}
div.square:hover .half1 { 
	opacity:0.4;
	background-color:#0AC030;
}
div.square:hover .half2{ 
	opacity:0.4;
	background-color:#0AC030;
}
div.square:hover .rectangle{ 
	background:#80C020;
}
ul.putting{ 
	display:none;
	margin-top:-69px;
	margin-left:0;
	padding:0;
	position:relative;
	list-style:none;
	background:violet;
}	
.square:hover ul.putting{
	display:block;
	position:absolute;
}
.half1{ 
	height:50px;
	width:100px;
	background:#80C020;
}
.half2{ 
	height:50px;
	width:100px;
	background:#80C020;
	margin-top:-40px;
}	
ul,li{ 
	padding:0;
	margin:0;
}
ul.putting a{ 
	color:black;
	text-decoration:none;
	cursor:pointer;
	z-index:9999;
	position:relative;
	padding:0;
	margin:0;
}	
ul.putting li:nth-child(1):hover{ 
	background:rgb(81,154,96);
}
ul.putting li:nth-child(2):hover{ 
	background:#80C020;
}
ul.putting li:nth-child(3):hover{ 
	background:#80C020;
}

<body style="background:grey">

<div class="square">
	<div class="half1"></div>
	<div class="rectangle"></div>
	
	<ul class="putting">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
	<div class="half2"></div>
</div>

</body>

http://webkod.pl/kurs-css/lekcje/dzial-1/pozycja-relatywna-absolutna-ustalona

https://www.w3.org/TR/2018/CR-selectors-3-20180130/#nth-child-pseudo

http://www.kurshtml.edu.pl/generatory/kolory.html https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

odpowiedź 19 maja 2018 przez RafalS VIP (122,820 p.)
edycja 19 maja 2018 przez RafalS

Zrób te listy z nickami graczy jako elementy w tym samym divie co obrazki, ale domyślnie ukryte: display: hidden. Po najechaniu myszą na diva, np hover w css'ie lub zdarzenie mouseover w DOM'ie - obrazek sie rozjaśnia, a lista zmienia display na block. W cssie jest też taka właściwośc jak z-index, która mówi, która warstwa jest wyżej jeśli dwie na siebie zachodzą. Użyj jej żeby lista przysłoniła obrazek.

Edit: polecam też zrobić inspect element / zbadaj element na tym kwadracie i będziesz mniej wiecej widział jak oni to zrobili. Jak sie sprawdzi to widać, że robią toggle klasy hidden w elementach, która dodaje display:none!important;. A na całym bloku jest :hover, który dodaje background color.