在图像css上的文字与覆盖效果

时间：2017-10-17 04:38:34

标签： html css

我尝试将一些内容放在带有一些叠加效果的图像上，但它并不显示输出作为我的需要。此外，我不知道如何做叠加效果，任何人都可以帮助我。

.destination {
  padding: 20px;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.destination h3 {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.destination span {
  display: block;
  font-size: 15px;
  color: #fff;
  line-height: 16px;
}
.overlay-leftTop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
}
.destinationmask {
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0.4;
  filter: alpha(opacity=50);
  background: #000;
}
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
<a href="" class="overlay-leftTop">
    <div class="table-display">
        <div class="table-cell table-cell-bottom">
            <div class="destination">
                <h3>TEST</h3>
                <span>Check,check1,check2</span>
            </div>
        </div>
    </div>

其实我需要像this

这样的东西

3 个答案:

答案 0 :(得分：1)

您应该使用background-image CSS属性而不是<img>标记。对于效果，请使用:before等伪元素。

请看下面的代码段：

.destination {
    padding: 20px;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: all .5s ease;
    -ms-transition: all .5s ease;
    -webkit-transition: all .5s ease;
}
.destination h3 {
    font-size: 25px;
    color: #fff;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.destination span {
    display: block;
    font-size: 15px;
    color: #fff;
    line-height: 16px;
}
.overlay-leftTop {
    display: block;
    position: relative;
    text-decoration: none;
    width: 300px;
    height: 300px;
    z-index: 9;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
}
.overlay-leftTop:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0,0,0,0.3);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    
}
.overlay-leftTop:hover {
   text-decoration: none;
}
.overlay-leftTop:hover:before {
   background: rgba(0,0,0,0.5);
}
.destinationmask {
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0.4;
    filter: alpha(opacity=50);
    background: #000;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
  <div class="table-display">
    <div class="table-cell table-cell-bottom">
      <div class="destination">
        <h3>TEST</h3>
        <span>Check,check1,check2</span>
      </div>
    </div>
  </div>
</a>

希望这有帮助！

答案 1 :(得分：0)

请试试这个。我添加了一些CSS：

.img-wrap {
  display: inline-block;
  position: relative;
  width: 386px;
}
.img-box:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  transform:scale(0); 
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
  transform:scale(1); 
}
.img-wrap:hover .overlay-leftTop{
  opacity:1;  
}
img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  display: block;
}


.destination {
  padding: 20px;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.destination h3 {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.destination span {
  display: block;
  font-size: 15px;
  color: #fff;
  line-height: 16px;
}
.overlay-leftTop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;  
  opacity:0;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
}
.img-wrap {
  display: inline-block;
  position: relative;
  width: 386px;       
}
.img-box:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  transform:scale(0); 
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
  transform:scale(1); 
}
.img-wrap:hover .overlay-leftTop{
  opacity:1;  
}
img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  display: block;
}
<div class="img-wrap">
  <div class="img-box">
    <img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
  </div>
  <a href="" class="overlay-leftTop">
    <div class="table-display">
        <div class="table-cell table-cell-bottom">
            <div class="destination">
                <h3>TEST</h3>
                <span>Check,check1,check2</span>
            </div>
        </div>
    </div>
  </a>
</div>

答案 2 :(得分：0)

我认为这就是你想要的。

＆＃13;
＆＃13; 
    .destination {
        padding: 20px;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: all .5s ease;
        -ms-transition: all .5s ease;
        -webkit-transition: all .5s ease;
    }
    .destination h3 {
        font-size: 25px;
        color: #fff;
        line-height: 20px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .destination span {
        display: block;
        font-size: 15px;
        color: #fff;
        line-height: 16px;
    }
    .overlay-leftTop {
        display: block;
        position: relative;
        text-decoration: none;
        width: 300px;
        height: 300px;
        z-index: 9;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
    }
    .overlay-leftTop:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        background: rgba(0,0,0,0.3);
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        
    }
    .overlay-leftTop:hover {
       text-decoration: none;
    }
    .overlay-leftTop:hover:before {
       background: rgba(0,0,0,0.5);
    }
    .destinationmask {
        width: 100%;
        height: 100%;
        z-index: 5;
        opacity: 0.4;
        filter: alpha(opacity=50);
        background: #000;
    }
    .view-btn{
          position: absolute;
        top: 180px;
        font-size: 16px !important;
        border: 2px solid #fff;
        display: inline-block !important;
        text-align: center;
        padding: 10px 15px;
        opacity: 0;
      transition:all 350ms ease 0s;
    }
    .overlay-leftTop:hover .view-btn{
      opacity:1;
    }
＆＃13; 
    <a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
      <div class="table-display">
        <div class="table-cell table-cell-bottom">
          <div class="destination">
            <h3>TEST</h3>
            <span>Check,check1,check2</span>
  <span class="view-btn">View More</Span>
          </div>
        </div>
      </div>
    </a>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题