切换隐藏元素的 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;
}