Question

在这里编码新秀。我有一些叠加层，当将鼠标悬停在图像上时会显示一些文本。关于他们的行为，我想改变两件事，我不够聪明，无法解决。

您可以在此处查看它们的运行情况

http://www.brightonyouthcentre.org.uk/skatepark

首先，此刻蓝色叠加层的高度为图像高度的20％。如果可能的话，我想使它的高度相对于文本的数量而不是静态大小。不知道从哪里开始。

其次，我不希望在移动设备上出现此行为，因此我想将叠加层移动到图片下方，并使其默认显示。目前，它可以执行此操作，但似乎并没有放在正确的位置，而我使用的方法会导致每个图像之间的间距出现问题。另外，我猜如果我解决问题1，那么我当前的尝试将出局。任何与这些帮助都将不胜感激！

CSS

.home-grid-block {
  position: relative;
  width: 100%;
}

.home-grid-header {
    background-color:#e4a628;
    text-align: center;
    margin: 0 auto;
    font-size:20px;
    font-weight: bold;
    padding:10px;
    color:white;
    }

.home-grid-image {
  display: block;
  width: 100%;
  height: auto;
}

.home-grid-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;

}

.home-grid-block:hover .home-grid-overlay {
  height: 20%;
  padding-top:5px;
}


@media only screen and (max-width: 768px) {
    .home-grid-overlay {
  height: 20%;
  margin-bottom:-20%;
  padding-top:5px;
}
}

.home-grid-text {
  color: white;
  font-size: 16px;
  margin:0 auto;
  text-align: center;
}

HTML

<a href="http://www.brightonyouthcentre.org.uk/skatepark/skateboard-tuition/">
<div class="home-grid-block">
 <div class="home-grid-header">Header above image</div>
  <img class="home-grid-image" src="http://www.brightonyouthcentre.org.uk/skatepark/wp-content/uploads/sites/8/2018/07/summer-tuition-sq.jpg">
  <div class="home-grid-overlay">
    <div class="home-grid-text">This text will vary in length every time. </div>
  </div>
</div>
</a>

Answer 1

**For auto height.**

.home-grid-block:hover .home-grid-overlay {
  height: auto;
  padding:25px;
}


**Mobile Fix New code**

    @media only screen and (max-width: 768px) {


        .home-grid-overlay {
          height: auto;
          position: relative;
          padding:25px;
        }
        }

完善叠加层的行为

1 个答案: