.csgo-player {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.csgo-player-link {
width: 40%;
position: relative;
}
.csgo-player-info {
padding: 10px;
height: 200px;
width: 100%;
background-color: green;
position: absolute;
display: none;
}
.csgo-player-link:hover .csgo-player-info {
display: block;
position: absolute;
z-index: -1;
}
<li class="csgo-player">
<a href="#" class="csgo-player-link">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="">
<div class="csgo-player-info">
<header class="csgo-player-header">
<h2 class="csgo-player-header__title">arT</h2>
<span>Andrei Piovezan - IGL</span>
</header>
<div class="csgo-player-socials">
<ul class="csgo-player-social-list">
<li class="csgo-player-social-item"></li>
<li class="csgo-player-social-item"></li>
<li class="csgo-player-social-item"></li>
</ul>
<a href="#" class="csgo-player-download">Download CFG
<i class="csgo-player-download__arrow"></i>
</a>
</div>
</div>
</a>
</li>
Quero que quando der um hover no .csgo-player-link
, o .csgo-player-info
apareça... Alguém pode me ajudar?