Question

当我点击里面有fa-icon的黄色圆圈时，我试图实现这一点，然后叠加显示在我的图像上。现在，叠加层显示在图像下方（带有白色文本的绿色背景）。我的重叠代码可以使用，将div id="overlay"更改为div class="overlay"。如何使按钮单击显示我的覆盖图像（没有JavaScript）？

＆＃13;

/*@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 {
		color:#FFF;
		background-color:#000;
	}

/*@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;
}

＆＃13;

<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>
				</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>

＆＃13;

Answer 1

您可以将以下部分添加到CSS中：

#overlay {
  display: none;
}

#overlay:target {
  display: block;
}

然后在你的代码更改中：

.product-detailscar .overlay

要：

#overlay

将不透明度改为0以上，例如。 0.5;

请注意，它只能以一种方式工作，所以它只会显示叠加层。如果你想在纯CSS中显示/隐藏叠加层，那么复选框hack是要走的路。有关详情，请查看https://css-tricks.com/the-checkbox-hack/

更新的示例（没有复选框黑客）：

＆＃13;

  .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 {
		color:#FFF;
		background-color:#000;
	}

  .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;
}

＆＃13;

<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>
				</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>

＆＃13;

顺便说一下，清理代码是个好主意;）

Answer 2

您可以在image-video-linkssidebar类下方移动叠加div，如下所示：

<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%;

按钮单击以显示覆盖图像（仅CSS）

2 个答案: