CSS不透明转换为切换隐藏元素

Question

我在这个特定的过渡和我的网站的一般特殊领域有很多麻烦。

我试图过渡“#desk”元素的不透明度，所以当你点击“我的个人资料”时，它会淡入。父元素应该开始隐藏，所以它只显示“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; 
}