Sticky Overlay mit Übergang

Question

Ich mag mit Übergang ein Overlay haben, wie in dem Follow-Screenshot

Und hier ist mein aktueller Code:

.someclass { 
 
    padding: 5px 5px 5px 5px; 
 
    border-radius: 5px 0px 0px 5px; 
 
    height: 100px; 
 
    width: 30px; 
 
    top: 50% !important; 
 
    right: 0 !important; 
 
    float: right; 
 
    position: fixed !important; 
 
    transition: width 0.5s; 
 
    -webkit-transition: width 0.5s; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    z-index: 100 !important; 
 
    color: white; 
 
} 
 

 
.someclass:hover { 
 
    width: 400px; 
 
}

<div class="someclass" style="background-color: #4A90E2;"> 
 
    <h4 style="transform:rotate(-90deg)" ;>Text</h4> 
 
    <h2> Some Text</h2> 
 
    <p>much more text</p> 
 
</div>

Answer 1

Teile Sie Element in zwei Teile, dann verwenden Sie Float nach links und rechts, mit Hintergrund, Position und Z-Index, um Ove rLAY wenn es

.someclass { 
 
    border-radius: 5px 0px 0px 5px; 
 
    height: 100px; 
 
    width: 30px; 
 
    top: 50% !important; 
 
    right: 0 !important; 
 
    float: right; 
 
    position: fixed !important; 
 
    transition: width 0.5s; 
 
    -webkit-transition: width 0.5s; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    z-index: 100 !important; 
 
    color: white; 
 
} 
 

 
.someclass .right { 
 
    float: right; 
 
    background: #4A90E2; 
 
    width: 30px; 
 
    height: 100%; 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 

 
.someclass .left { 
 
    position: absolute; 
 
    left: 0; 
 
    float: left; 
 
} 
 

 
.someclass:hover { 
 
    width: 400px; 
 
}

<div class="someclass" style="background-color: #4A90E2;"> 
 
    <div class="right"> 
 
    <h4 style="transform:rotate(-90deg)" ;>Text</h4> 
 
    </div> 
 
    <div class="left"> 
 
     <h2> Some Text</h2> 
 
     <p>much more text</p> 
 
    </div> 
 
</div>

Answer 2

Dank einer Tonne so weit zusammenbrach. Meine letzte Frage ist, wie kann man den Text auf der rechten Seite nach unten verschieben?

.someclass { 
 
    border-radius: 5px 0px 0px 5px; 
 
    height: 100px; 
 
    width: 30px; 
 
    top: 50% !important; 
 
    right: 0 !important; 
 
    float: right; 
 
    position: fixed !important; 
 
    transition: width 0.5s; 
 
    -webkit-transition: width 0.5s; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    z-index: 100 !important; 
 
    color: white; 
 
} 
 

 
.someclass .right { 
 
    float: right; 
 
    background: #4A90E2; 
 
    width: 30px; 
 
    height: 100%; 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 

 
.someclass .left { 
 
    position: absolute; 
 
    left: 0; 
 
    float: left; 
 
} 
 

 
.someclass:hover { 
 
    width: 400px; 
 
}

<div class="someclass" style="background-color: #4A90E2;"> 
 
    <div class="right"> 
 
    <h4 style="transform:rotate(-90deg)" ;>Text</h4> 
 
    </div> 
 
    <div class="left"> 
 
     <h2> Some Text</h2> 
 
     <p>much more text</p> 
 
    </div> 
 
</div>