.header-content-trigger {
cursor: pointer;
width: 100px;
height: 30px;
margin-bottom:-15px;
background-image: linear-gradient(to right, rgba(0,0,0, 1) 25%, rgba(0,0,0, 0) 100%);
opacity:0.5;
padding:7px 20px;
transition: width 1.8s, height 1s, opacity 2s;
}
.header-content:not(.header-content-trigger) {
display: none;
user-select: none;
}
.header-content-trigger:hover, .header-content:hover + .header-content-trigger {
width: 250px;
height: 50px;
margin-bottom:-25px;
opacity: 1;
}
.header-content-trigger:hover + .header-content {
display: inline-block;
}
.header-content-trigger:active + .header-content {
display: inline-block;
}
.header-content:hover {
display: inline-block;
}