默认情况下在图像上显示文本

Question

我正在使用这个HTML模板，在这里看到同样的行动

向下滚动后，您将看到"探索我们的首选目的地"部分，正如您在悬停时看到的那样，我正在获得城市和国家名称...

但是，如果我想显示，默认情况下显示城市和国家/地区名称，就像我们仍然仅在悬停时显示一样。

/* -------- Destinations -------- */
.destination-box {
  display: block;
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
  border-radius: 5px;
  z-index: 2;
}
.destination-box .box-cover {
  line-height: 1em;
  font-size: 0;
}
.destination-box img {
  backface-visibility: hidden;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transform: scale(1.045);
  -ms-transform: scale(1.045);
  transform: scale(1.045);
  width: 100%;
}
.destination-box .boats-qty {
  pointer-events: none;
  position: absolute;
  border-radius: 5px;
  background: #e7434e;
  color: #ffffff;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  display: inline-block;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-weight: 700;
  left: 30px;
  top: 30px;
}
.destination-box .boats-qty::before {
  content: "";
  font-family: icomoon;
  display: inline-block;
  margin-right: 10px;
  font-weight: 500;
}
.destination-box .box-details {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 30px;
}
.destination-box .box-details::before {
  content: "";
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  left: 0;
  top: -15px;
  opacity: 0.65;
  background: linear-gradient(to bottom, transparent, #000);
}
.destination-box .box-meta {
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  visibility: hidden;
  position: relative;
  opacity: 0;
  z-index: 2;
}
.destination-box .box-meta .city,
.destination-box .box-meta .country {
  font-family: "Raleway", sans-serif;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1em;
  color: #ffffff;
  margin: 0;
}
.destination-box .box-meta .city {
  font-size: 30px;
  margin: 0 0 7.5px;
}
.destination-box .box-meta .country {
  font-size: 20px;
}
.destination-box:hover .box-details::before {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}
.destination-box:hover .box-meta {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}
.destination-box:hover img {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
/* --- Loading Destinations Box --- */
.load-destinations-box {
  display: none;
}
.load-destinations-box .destination-box {
  -webkit-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
  opacity: 0;
}
.load-destinations-box.open .destination-box {
  opacity: 1;
}

<div class="col-md-8 col-sm-12 col-xs-24">
  <div class="destination-box">
    <div class="box-cover">
      <a href="#">
        <img src="img/destination-3.jpg" alt="destination image" />
      </a>
    </div>
    <div class="box-details">
      <div class="box-meta">
        <h4 class="city">Ibiza</h4>
        <p class="country">Spain</p>
      </div>
    </div>
  </div>
</div>

Answer 1

替换屏幕中的以下类.css

.destination-box .box-details::before {
  content: "";
  opacity: 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  left: 0;
  top: -15px;
  opacity: 0.65;
  background: linear-gradient(to bottom, transparent, #000);
}
.destination-box .box-meta {
  position: relative;
  z-index: 2;
}

Answer 2

您可以从.destination-box .box-meta样式中删除visibility: hidden和opacity: 0，如下所示：

.destination-box .box-meta{
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  position: relative;
  z-index: 2;
}

这将使包含信息的div可见。

如果您愿意，也可以删除transition和transform样式，因为它将不再被hover效果使用。

Answer 3

更改了悬停并为您制作了完整的 css 文件。

您可以找到更改。

用以下代码替换 CSS

.destination-box {
  display: block;
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
  border-radius: 5px;
  z-index: 2;
}
.destination-box .box-cover {
  line-height: 1em;
  font-size: 0;
}
.destination-box img {
  backface-visibility: hidden;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transform: scale(1.045);
  -ms-transform: scale(1.045);
  transform: scale(1.045);
  width: 100%;
}
.destination-box .boats-qty {
  pointer-events: none;
  position: absolute;
  border-radius: 5px;
  background: #e7434e;
  color: #ffffff;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  display: inline-block;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-weight: 700;
  left: 30px;
  top: 30px;
}
.destination-box .boats-qty::before {
  content: "";
  font-family: icomoon;
  display: inline-block;
  margin-right: 10px;
  font-weight: 500;
}
.destination-box .box-details {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 30px;
}
.destination-box .box-details::before {
  content: "";
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  left: 0;
  top: -15px;
  opacity: 0.65;
  background: linear-gradient(to bottom, transparent, #000);
}
.destination-box .box-meta {
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
  visibility: hidden;
  position: relative;
  opacity: 0;
  z-index: 2;
}
.destination-box .box-meta .city,
.destination-box .box-meta .country {
  font-family: "Raleway", sans-serif;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1em;
  color: #ffffff;
  margin: 0;
}
.destination-box .box-meta .city {
  font-size: 30px;
  margin: 0 0 7.5px;
}
.destination-box .box-meta .country {
  font-size: 20px;
}
/*changed the hover */
.destination-box .box-details::before {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}
.destination-box .box-meta {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}
.destination-box img {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
/* --- Loading Destinations Box --- */
.load-destinations-box {
  display: none;
}
.load-destinations-box .destination-box {
  -webkit-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
  opacity: 0;
}
.load-destinations-box.open .destination-box {
  opacity: 1;
}