CSS 切换隐藏元素的不透明度过渡

Question

我在这个特定的转换以及我网站的这个特定区域中遇到了很多麻烦。

我正在尝试转换“#desk”元素的不透明度，因此当您单击 "My profile" 时它会淡入。父元素应该开始隐藏，所以它仅在 "showme" 时显示是焦点。我知道你不能过渡 "display"，虽然我看过的教程能够实现隐藏元素和不透明度淡化，所以我不知道我做错了什么。

我已经能够通过做一些调整来转换它，但是我失去了我想保留的切换 show/hide 方面。我也遇到了切换本身的问题，因为它在单击时会移动页面中的其他元素。

如果有人能提供帮助，我将不胜感激，即使只是粗略地了解我哪里出错了，如果发现有太多问题需要解决的话。

.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/ ~ 检查这个 fiddle

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

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

CSS 切换隐藏元素的不透明度过渡

CSS opacity transitions for toggled hidden elements

html

css

transition

opacity

display