html - 我如何在 html 中的图像上包含 2 行文本（标题和子标题）和框阴影

Question

如何向图像和框后面的框阴影添加文本（标题和副标题）。我尝试将它插入到 css 中的容器下，但它不起作用。

<div class="row">
  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
        <li class="img_wrap">
          <img class="img_img" src="resources/img/posterimage.jpg" alt="POS Device">
          <p class="img_description">More on this</p>
        </li>
      </ul>
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
        <li class="img_wrap">
          <img class="img_img" src="resources/img/Router.jpg" alt="Router Device ">
          <p class="img_description">More on this</p>
        </li>
      </ul>
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
        <li class="img_wrap">
          <img class="img_img" src="resources/img/Handwashed.jpg" alt="Boy washing hands">
          <p class="img_description">More on this</p>
        </li>
      </ul>
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
        <li class="img_wrap">
          <img class="img_img" src="resources/img/Fleetos.jpg" alt="Yellow Truck">
          <p class="img_description">More on this</p>
        </li>
      </ul>
    </div>
  </div>
</div>

.product-box {
  width: 100%;
  float: left;
  display: block;
  max-height: auto;
  margin-bottom: 80px;
  overflow: hidden;
  border-bottom: 100px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 20px #404040;
  font-size: 90%;
  margin-top: 30px;
  box-sizing: border-box;
}

.img_wrap {
  list-style: none;
  position: relative;
  box-shadow: #bcbcbc;
  overflow: hidden;
  margin: 0px;
  width: 100%;
  background-color: #000;
}

.img_description {
  text-align: center;
  margin-top: 30px;
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  opacity: 0;
  visibility: hidden;
  color: #fff;
  border: 2px solid #fff;
  border-spacing: 5px;
  font-size: 100%;
  padding: 10px;
  transition: opacity 0.2s, visibility 0.2s;
}

.img_img {
  width: 100%;
  opacity: 1;
  display: block;
  height: auto;
  transform: scale(1.03);
  transition: transform 0.2s;
  text-decoration-style: solid;
  backface-visibility: hidden;
  overflow: hidden;
}

.img_img:hover {
  transform: scale(1.15);
  opacity: 0.4;
}

.img_wrap:hover .img_description {
  visibility: visible;
  opacity: 1;
}

如何向图像和框后面的框阴影添加文本（标题和副标题）。我尝试将它插入到 css 中的容器下，但它不起作用。

标签： htmlcss

Answer 1

你需要这样的结果吗？在 css 中，我为.row类添加了规则以使用flex.

.row {
  display: flex;
  justify-content: center;
}

.product-box {
  width: 100%;
  float: left;
  display: block;
  max-height: auto;
  margin-bottom: 80px;
  overflow: hidden;
  border-bottom: 100px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 20px #404040;
  font-size: 90%;
  margin-top: 30px;
  box-sizing: border-box;
}

.img_wrap {
  list-style: none;
  position: relative;
  box-shadow: #bcbcbc;
  overflow: hidden;
  margin: 0px;
  width: 100%;
  background-color: #000;
}

.img_description {
  text-align: center;
  margin-top: 30px;
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  opacity: 0;
  visibility: hidden;
  color: #fff;
  border: 2px solid #fff;
  border-spacing: 5px;
  font-size: 100%;
  padding: 10px;
  transition: opacity 0.2s, visibility 0.2s;
}

.img_img {
  width: 100%;
  opacity: 1;
  display: block;
  height: auto;
  transform: scale(1.03);
  transition: transform 0.2s;
  text-decoration-style: solid;
  backface-visibility: hidden;
  overflow: hidden;
}

.img_img:hover {
  transform: scale(1.15);
  opacity: 0.4;
}

.img_wrap:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div class="row">
  <div class="col span-1-of-4">
    <div class="product-box">
      
      <ul class="products-container">
       <p>Name1</p>
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="POS Device">
          <p class="img_description">More on this</p>
        </li>
        <p>Description1</p>
      </ul>
      
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
       <p>Name2</p>
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Router Device ">
          <p class="img_description">More on this</p>
        </li>
        <p>Description2</p>
      </ul>
      
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
       <p>Name3</p>
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Boy washing hands">
          <p class="img_description">More on this</p>
        </li>
        <p>Description3</p>
      </ul>
      
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
        <p>Name4</p>
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Yellow Truck">
          <p class="img_description">More on this</p>
        </li>
        <p>Description4</p>
      </ul>
      
    </div>
  </div>
</div>

这个答案是名称和描述在块下的位置。

.row {
  display: flex;
  justify-content: center;
}

.product-box {
  width: 100%;
  float: left;
  display: block;
  max-height: auto;
  margin-bottom: 80px;
  overflow: hidden;
  border-bottom: 100px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 20px #404040;
  font-size: 90%;
  margin-top: 30px;
  box-sizing: border-box;
}

.img_wrap {
  list-style: none;
  position: relative;
  box-shadow: #bcbcbc;
  overflow: hidden;
  margin: 0px;
  width: 100%;
  background-color: #000;
}

.img_description {
  text-align: center;
  margin-top: 30px;
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  opacity: 0;
  visibility: hidden;
  color: #fff;
  border: 2px solid #fff;
  border-spacing: 5px;
  font-size: 100%;
  padding: 10px;
  transition: opacity 0.2s, visibility 0.2s;
}

.img_img {
  width: 100%;
  opacity: 1;
  display: block;
  height: auto;
  transform: scale(1.03);
  transition: transform 0.2s;
  text-decoration-style: solid;
  backface-visibility: hidden;
  overflow: hidden;
}

.img_img:hover {
  transform: scale(1.15);
  opacity: 0.4;
}

.img_wrap:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div class="row">
  <div class="col span-1-of-4">
    <div class="product-box">
      
      <ul class="products-container">       
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="POS Device">
          <p class="img_description">More on this</p>
        </li>
        <p>Name1</p>
        <p>Description1</p>
      </ul>
      
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Router Device ">
          <p class="img_description">More on this</p>
        </li>
        <p>Name2</p>
        <p>Description2</p>
      </ul>
      
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Boy washing hands">
          <p class="img_description">More on this</p>
        </li>
        <p>Name3</p>
        <p>Description3</p>
      </ul>
      
    </div>
  </div>

  <div class="col span-1-of-4">
    <div class="product-box">
      <ul class="products-container">   
        <li class="img_wrap">
          <img class="img_img" src="https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1" alt="Yellow Truck">
          <p class="img_description">More on this</p>
        </li>
        <p>Name4</p>
        <p>Description4</p>
      </ul>
      
    </div>
  </div>
</div>