トグルされた隠された要素のCSS不透明遷移

Question

私は、この特定の移行、およびこのウェブサイト全体の多くの問題を抱えています。

"#desk"要素の不透明度を変えようとしているので、 "My profile"をクリックするとフェードインされます。親要素は隠されるので、 "showme"にフォーカスがあるときのみ表示されます。私が見たチュートリアルでは、隠し要素と不透明度フェードの両方を達成することができたので、私が間違っていることを知らないのですが、 "表示"を変えることはできません。

私はこれをいくつか調整することで移行することができましたが、私は維持したいトグル表示/非表示のアスペクトを失います。また、クリックしたときにページ内の他の要素を移動させるので、トグル自体に問題があります。

もし誰かが私に本当に感謝してもらえれば、私が間違っている場所についての大まかな考えでさえ、あまりにも多くのことが出てくると分かります。

.darea { 
 
    position:relative; 
 
    margin:0 auto; 
 
    width:100%; 
 
    text-align:center; 
 
    font-size:10pt; 
 
} 
 

 
.dtitle { 
 
    margin-top:50px; 
 
    margin-bottom:50px; 
 
    color:#535353; 
 
    font-family:'Lato'; 
 
} 
 

 
.text-cent { 
 
    text-align:center; 
 
} 
 

 
.dtitle h2 { 
 
    margin-bottom:0px; 
 
    text-transform:uppercase; 
 
    letter-spacing:2px; 
 
    font-weight:normal; 
 
    color:#57BC90; 
 
} 
 

 
.half-txt { 
 
    width:50%; 
 
    margin:0 auto; 
 
    display:inline-block; 
 
    line-height:25px; 
 
} 
 

 
.member, .member .dimg { 
 
    width:400px; 
 
    padding-bottom:20px; 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.dposition { 
 
    text-align:center; 
 
} 
 

 
.showme, a { 
 
    text-decoration:none; 
 
} 
 

 
.showme:focus + #desk {display:block;} 
 

 
#desk { 
 
    display:none; 
 
} 
 

 
#dtext { 
 
    opacity:0; 
 
} 
 

 
.showme:focus ~ #dtext {opacity:1;} 
 

 
.trans { 
 
    -webkit-transition: all 10s; 
 
-moz-transition: all 10s; 
 
-o-transition: all 10s; 
 
transition: all 10s; 
 
} 
 

 
.dposition { 
 
    letter-spacing:2px; 
 
    width:100%; 
 
} 
 

 
.dposition h5 { 
 
    text-transform:uppercase; 
 
    color:#535353; 
 
} 
 

 
.dposition span { 
 
    font-size:10px; 
 
    text-transform:uppercase; 
 
    letter-spacing:1px; 
 
}

<div class="darea"> 
 
<div class="member"> 
 
    <div class="dimg"> 
 
    <img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive"> 
 
    </div> 
 

 
    <a href="#" class="showme">My Profile</a> 
 
    <div id="desk"> 
 
     <p id="dtext"class="trans">Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum. 
 
</p> 
 
    </div> 
 
     
 
    <div class="dposition"> 
 
     <h5>Lorem</h5> 
 
     <span>Director &amp; Director</span> 
 
    </div> 
 
</div> 
 

 
<!---Member 2--> 
 

 

 
<div class="member"> 
 
    <div class="dimg"> 
 
    <img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive"> 
 
    </div> 
 

 
    <a href="#" class="showme">My Profile</a> 
 
    <div id="desk"> 
 
     <p>Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum 
 
</p> 
 
    </div> 
 
     
 
    <div class="dposition"> 
 
     <h5>Lorem</h5> 
 
     <span>Director &amp; Director</span> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

https://jsfiddle.net/v1fyvxyw/〜このフィドルをチェック

.showme:focus + #desk { 
opacity:1; 
visibility:visible; 
position:relative; 
} 

#desk { 
    visibility:hidden; 
opacity:0; 
position: absolute; 
}