Looking to create a layout similar to musixmatch where the active verse is displayed at the center of the ul.
https://i.sstatic.net/X7RV1.png
I have experience doing this with JavaScript, but I'm curious if it's achievable using only CSS.
<ul id="lyrics">
<li>You know, everybody's been tellin' me what they think about me for the last few months</li>
<li class="active">It's too loud</li>
<li>Maybe it's time I tell 'em what I think about them</li>
</ul>
CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
background: #252525;
font-family: 'Roboto', sans-serif;
color: white;
}
#lyrics {
background-color: rgba(0, 0, 0, 0.45);
position: fixed;
width: 70%;
list-style: none;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
margin: 0 auto;
text-align: center;
font-weight: 500;
font-size: 2em;
height: 50vh;
color: rgb(240, 240, 240);
overflow: hidden;
}
#lyrics .active {
color: cornsilk;
font-weight: 600;
font-size: 1.2em;
}