ボックスの後ろからテキストを変換する

Question

私はdivの要素にtextという段落タグを入れました。私がこのdivを動かすと、テキストがdivから出てきます（後ろから）。私は負のz-インデックスを試しましたが、うまくいきませんでした。

.box p { 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    opacity: 0; 
    z-index: -1; 
    visibility: hidden; 
    transition: top .3s, opacity .3s, visibility .3s, z-index .3s; 
} 

.box:hover p { 
    top: -28px; 
    opacity: 1; 
    z-index: 1; 
    visibility: visible; 
} 

Answer 1

2つの問題。まず、両方の場合にvisibility:hiddenがあるので、要素は表示されません。

第2の問題は、<p>が表示されていない、または上にホバリングしていないときに、divに上書きすることができないときの高さがないことです。あなたの方法であなたを得るのを助けるために、この問題を解決するには

：

div {height:100px;} 
.box p { 
    display: block; 
    height:300px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    opacity: 0; 
    z-index: -1; 
    transition: top .3s, opacity .3s, visibility .3s, z-index .3s; 
} 
.box:hover p { 
    top: -28px; 
    opacity: 1; 
    z-index: 1; 
} 

しかし、それはあなたのための理想的な方法かもしれない、あなたはそれを調整する必要があります。

ホバー上にはtop: -28px;がありますので、右側の画面からわずかにスクロールしています。

編集： もう1つ知っておきたいことです。 z-indexは移行プロパティではありません。つまり、丸められた1.0への途中で、ゼロから0.1から0.2への遷移はできません。 z-indexは実際のレイヤーで、1つのレベルから次のレベルまで全体の単位でしか移動できません。

Answer 2

あなたはこのようなものを試すことができます。背後から

.box { 
 
    position:relative; 
 
    margin:50px; 
 
    padding:10px; 
 
    border:1px solid; 
 
    cursor:pointer; 
 
} 
 

 
.box p { 
 
    position: relative; 
 
    top: -10px; 
 
    right: -5px; 
 
    opacity: 0; 
 
    transition: all .3s; 
 
} 
 

 
.box:hover p { 
 
    top: 0; 
 
    right:0; 
 
    opacity: 1; 
 
}

<div class="box"> 
 
<p>lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume </p> 
 
</div>