按鈕單擊以在圖像上顯示覆蓋圖（僅限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 

要：

#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

您可以移動覆蓋DIV只圖像視頻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%;