I have a column of H2 elements that I rotate through with a CSS transform.
I need the background color of the H2 element to only cover the H2 element and text. There is a line running behind the text and right now the shortest element’s background is the length of the longest and covers the line behind it with a blank space after the text.
.title {
margin-top: -30px;
font-size: calc(17px + (0.01* 100vw));
}
.slogan {
background-color: #29335cff;
}
/* TEXT FLIPPER */
.text-container {
height: 2.45rem;
background-color: transparent;
overflow: hidden;
}
.text-flip {
animation: text-flip 5s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
}
.text-flip h2 {
background-color: #29335cff;
}
@keyframes text-flip {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-77%);
}
40% {
transform: translateY(-50%);
}
60% {
transform: translateY(-25%);
}
100% {
transform: translateY(0);
}
}<div class="title d-flex">
<div class="px-2 slogan">
<h2>
TAP COCKTAILS MADE
</h2>
</div>
<div class="text-container ">
<div class="text-flip d-flex justify-content-start flex-column">
<h2 class="">EASY</h2>
<h2 class="">PROFITABLE</h2>
<h2 class="">TASTY</h2>
<h2 class="">YOUR OWN</h2>
</div>
</div>
</div>
You need to sign in to view this answers
Leave feedback about this