Question

我在网站上有一个部分，我有两行图像，每行都有一个标题。我的客户想要悬停效果，当您将鼠标悬停在每个图像上时会显示一些文字。目前我将悬停的背景颜色设置为黑色。如何创建磨砂玻璃效果，或者至少如何使背景更加透明，以便在悬停时仍然能够在下方显示图像？

到目前为止我的代码（我为此目的只提供了一个图片示例） -

＆＃13;

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto; 

}


#whatwedo .container-fluid {

  width: auto;
  margin-left: 100px ;
  margin-right: 100px ;
  border-right: 0 ;
  }
  
.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

#whatwedo .col {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  position: relative;
  border: 2px solid white;
  /* margin: 30px 0 30px 0; */
}

#whatwedo img {

 
}


#whatwedo h2 {

  position: absolute;
  top: 50%;
  left: 45%;
  margin: 0 20px 0 20px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%)
  
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .7s ease;
  background-color: #000;
}

.col:hover .overlay {
  opacity: 4;
}

.text {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

＆＃13;

<div class="cols">
				      <div class="row no-gutters">
				      		<div class="col">
				                <h2>ADVERTISING</h2>
				                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" class="image" style="width: 100%; height: 100%;">
				                <div class="overlay">
				                	<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</div>
				                </div>	
				           </div> 
              </div>
</div>

＆＃13;

Answer 1

像这样： -

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto; 

}


#whatwedo .container-fluid {

  width: auto;
  margin-left: 100px ;
  margin-right: 100px ;
  border-right: 0 ;
  }
  
.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

#whatwedo .col {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  position: relative;
  border: 2px solid white;
  /* margin: 30px 0 30px 0; */
}

#whatwedo img {

 
}


#whatwedo h2 {

  position: absolute;
  top: 50%;
  left: 45%;
  margin: 0 20px 0 20px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%)
  
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .7s ease;
  background-color: rgba(0,0,0,0.7);
}

.col:hover .overlay {
  opacity: 4;
}

.text {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="cols">
    <div class="row no-gutters">
        <div class="col">
            <h2>ADVERTISING</h2>
            <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" class="image"
                 style="width: 100%; height: 100%;">
            <div class="overlay">
                <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit
                    quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat
                    velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum
                    repellat velit quae suscipit c.
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

请更改这些css类。你会得到透明的叠加效果。

    ActiveWorkbook.SaveAs Oud & "\" & filename
    ActiveWorkbook.SaveAs Archief & "\" & filename
    ActiveWorkbook.SaveAs Nieuw & "\" & filename

    Kill Oud & "\" & filename

CSS - 磨砂玻璃效果

2 个答案: