상자 뒤에서 텍스트 변환

Question

텍스트의 단락 태그가 포함 된 div 요소가 있습니다. 이 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

두 가지 문제가 있습니다. 첫째, 두 경우 모두 visibility:hidden이 있으므로 요소가 표시되지 않습니다.

두 번째 문제는 <p>이 보이지 않거나 마우스를 올렸을 때 높이가 없어서 마우스를 올려 놓을 수 없다는 것입니다.

하면이 당신의 방법에 당신을 얻을 수 있도록 수정하려면 :

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;이 표시되므로 오른쪽의 화면에서 약간 스크롤됩니다.

편집 : 또 다른 점은 내가 알고 싶다는 것입니다. Z- 색인은 전환 속성이 ​​아닙니다. 즉, 둥근 1.0으로가는 도중에는 0에서 0.1로 0.2로 전환 할 수 없습니다. Z- 인덱스는 실제 레이어이므로 한 레벨에서 다음 레벨로만 전체 단위로 이동할 수 있습니다.

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>