Кнопка нажимает, чтобы показать наложение поверх изображения (только CSS)

Question

Я пытаюсь достичь этого, когда вы нажимаете на желтый круг с иконкой fa внутри, а затем надпись отображается поверх моего изображения. Теперь надпись отображается ниже изображения (зеленый фон с белым текстом). Мой оверлейный код работает, чтобы увидеть это, измените div id="overlay" на div class="overlay". Как сделать щелчок на кнопке, чтобы показать мою надпись над изображением (без javascript)?

/*@media screen and (max-width: 767px) {*/ 
 
    .button i { 
 
    padding: 8px 13px; 
 
    display: inline-block; 
 
    -moz-border-radius: 180px; 
 
    -webkit-border-radius: 180px; 
 
    border-radius: 180px; 
 
    -moz-box-shadow: 0px 0px 2px #888; 
 
    -webkit-box-shadow: 0px 0px 2px #888; 
 
    box-shadow: 0px 0px 2px #888; 
 
    background-color: yellow; 
 
    color: red; 
 
    position: absolute; 
 
    left: 20%; 
 
    top: 20%; 
 
    } 
 
/*}*/ 
 

 
.button i:hover { 
 
\t \t color:#FFF; 
 
\t \t background-color:#000; 
 
\t } 
 

 
/*@media screen and (min-width: 768px) {*/ 
 
    .product-detailscar:hover .overlay { 
 
    opacity: 1; 
 
    } 
 
/*}*/ 
 

 
.product-detailscar { 
 
    background-color: #E6E6E6; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.intro, .userfield1car { 
 
    color:#fff; 
 
    font-weight:700; 
 
    font-size:22px; 
 
    text-align:center; 
 
    background-color:green; 
 
} 
 

 
.product-detailscar .overlay { 
 
    /*.well.carousel .overlay {*/ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    border-radius: 0; 
 
    background: blue; 
 
    color: #FFF; 
 
    text-align: left; 
 
    border-top: 1px solid #A10000; 
 
    border-bottom: 1px solid #A10000; 
 
    /*vertical-align: middle;*/ 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
     <a href="#" target="_blank"> 
 
     <div class="product-detailscar"> 
 
      <div class="image-video-linksidebar"> 
 
       <img alt="#" src="http://lorempixel.com/200/200"> 
 
       
 
       <div class="read-more"><a href="#overlay" class="button"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i></a> 
 
\t \t \t \t </div> 
 
      </div> 
 
      <div id="overlay"> 
 
       <div class="intro"> 
 
        Intro description car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-1-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-2-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-3-car 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!--</div>--></a> 
 
    </div>

Answer 1

Вы можете добавить следующую страницу в свой CSS:

#overlay { 
    display: none; 
} 

#overlay:target { 
    display: block; 
} 

И тогда в вашем изменении кода:

.product-detailscar .overlay 

To:

#overlay 

и изменить непрозрачность до более чем 0, напр. 0,5;

Обратите внимание, что он будет работать только в одном направлении, поэтому он отобразит только оверлей. Если вы хотите показать/скрыть оверлей в чистом CSS, это значит, что перехват флажка - это путь. Для получения дополнительной информации ознакомьтесь https://css-tricks.com/the-checkbox-hack/

Обновлен пример (не флажок хак):

.button i { 
 
    padding: 8px 13px; 
 
    display: inline-block; 
 
    -moz-border-radius: 180px; 
 
    -webkit-border-radius: 180px; 
 
    border-radius: 180px; 
 
    -moz-box-shadow: 0px 0px 2px #888; 
 
    -webkit-box-shadow: 0px 0px 2px #888; 
 
    box-shadow: 0px 0px 2px #888; 
 
    background-color: yellow; 
 
    color: red; 
 
    position: absolute; 
 
    left: 20%; 
 
    top: 20%; 
 
    } 
 

 
.button i:hover { 
 
\t \t color:#FFF; 
 
\t \t background-color:#000; 
 
\t } 
 

 
    .product-detailscar:hover .overlay { 
 
    opacity: 1; 
 
    } 
 

 
.product-detailscar { 
 
    background-color: #E6E6E6; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.intro, .userfield1car { 
 
    color:#fff; 
 
    font-weight:700; 
 
    font-size:22px; 
 
    text-align:center; 
 
    background-color:green; 
 
} 
 

 
#overlay { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0.5; 
 
    border-radius: 0; 
 
    background: blue; 
 
    color: #FFF; 
 
    text-align: left; 
 
    border-top: 1px solid #A10000; 
 
    border-bottom: 1px solid #A10000; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
#overlay:target { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
     <a href="#" target="_blank"> 
 
     <div class="product-detailscar"> 
 
      <div class="image-video-linksidebar"> 
 
       <img alt="#" src="http://lorempixel.com/200/200"> 
 
       
 
       <div class="read-more"><a href="#overlay" class="button"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i></a> 
 
\t \t \t \t </div> 
 
      </div> 
 
      <div id="overlay"> 
 
       <div class="intro"> 
 
        Intro description car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-1-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-2-car 
 
       </div> 
 
       <div class="userfield1car"> 
 
        Userfield-3-car 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!--</div>--></a> 
 
    </div>

Кстати, это хорошая идея, чтобы очистить ваш код;)

Answer 2

Вы можете перемещать накладку деление с чуть ниже классом изображения видео-linkssidebar, как это:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
<div> 
     <a href="#" target="_blank"> 
     <div class="product-detailscar"> 
      <div class="image-video-linksidebar"> 
       <div id="overlay"> 
       <div class="intro"> 
        Intro description car 
       </div> 
       <div class="userfield1car"> 
        Userfield-1-car 
       </div> 
       <div class="userfield1car"> 
        Userfield-2-car 
       </div> 
       <div class="userfield1car"> 
        Userfield-3-car 
       </div> 
      </div> 
       <img alt="#" src="http://lorempixel.com/200/200"> 

       <div class="read-more"><a href="#overlay" class="button"><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i></a> 
       </div> 
      </div> 
     </div> 
     <!--</div>--></a> 
    </div> 

Затем добавьте эти стили наложения:

position: absolute; 
    z-index: 9999; 
    margin: 0 auto; 
    width: 100%;