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

时间：2017-02-15 06:16:36

标签： html css

我正在使用此HTML模板，请参阅相同的操作here

一旦你Scrolldown，你会看到＆＃34;探索我们的顶级目的地＆＃34;部分，正如你在悬停时看到的那样，我正在获得城市和乡村名称......

但是如果我想默认显示城市和国家/地区名称，就像我们仅在悬停时显示的那样。

＆＃13;
＆＃13; 
/* -------- 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

替换screen.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;
}

答案 1 :(得分：0)

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

.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效果将不再使用它。

答案 2 :(得分：0)

更改了悬停并为您制作了完整的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;
}
相关问题
最新问题