Переходы непрозрачности 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; 
}