如何通过css在响应式图像上显示文本

Question

我有4列，其中我有不同尺寸的图像，后面是一个绝对定位的面具，出现在悬停中。

蒙版的宽度超出图像

如何设置遮罩的宽度始终与图像宽度相同？

https://jsfiddle.net/tsjzrmra/2/

HTML

<div class="wrap"><div class="row">
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/100X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/120X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/150X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/180X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>

CSS

* {  box-sizing: border-box; }
.wrap{
  width: 87%;
  margin: auto;
  padding: 0 10px;
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  box-shadow: 0 0 5px #eee;
}
img{
  max-width: 100%;
  height: auto; 
}
[class*='col-']{
  float:left;   
}
.col-1-3{
  width: 33.33%;
  padding: 20px;
} 
.col-2-3{
  width: 66.66%; 
  padding: 20px;
}
.col-1-4{
  width: 25%; 
  padding: 10px;
}
.show{
  width:100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #fff;
  display: block;
  border-radius: 4px;
}
.show .mask{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.show-first .mask {
  opacity: 0;
  background-color: rgba(0,0,0, 0.4);
  transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
  opacity: 1;
}
@media only screen and (max-width: 767px){
  .col-1-4{
    width: 50%; 
    padding: 10px;
    overflow: hidden;
    clear: right;
  }
  .wrap{
    width: 100%;
    margin: auto;
    overflow: hidden;
  }
  .mobile-clear{
    clear:both;
  }
}

Answer 1

在内容周围添加div包装器：

<div class="show show-first">
  <div class="mask-wrapper">
    <img src="http://placehold.it/100X200" />

    <div class="mask">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
    </div>
  </div>
</div>

然后更新CSS

.mask-wrapper: {
  position: relative;
  display: inline-block;
}

.show {
  text-align: center;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

img {
    max-width: 100%; // it's better to change it into a class instead
}

Answer 2

答案

您可以简单地删除此定义：

width: 100%;

并编辑此

display: block;

进入

display: inline-block

代表<div class="show">。此外，如果您希望<div class="show">与中心对齐，则需要添加

text-align: center;

到<div class="col-1-4">。

在行动中：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.wrap{
  width: 87%;
  margin: auto;
  padding: 0 10px;
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  box-shadow: 0 0 5px #eee;
}
img{
  max-width: 100%;
  height: auto;
}
[class*='col-']{
  float:left;   
}
.col-1-3{
  width: 33.33%;
  padding: 20px;
}
.col-2-3{
  width: 66.66%; 
  padding: 20px;
}
.col-1-4{
  width: 25%; 
  padding: 10px;
  text-align: center;
}
.show{
  height: 100%;
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #fff;
  display: inline-block;
  border-radius: 4px;
}
.show .mask{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.show-first .mask {
  opacity: 0;
  background-color: rgba(0,0,0, 0.4);
  transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
  opacity: 1;
}
@media only screen and (max-width: 767px) { 
  .col-1-4{
    width: 50%; 
    padding: 10px;
    overflow: hidden;
    clear: right;
  }
  .wrap{
    width: 100%;
    margin: auto;
    overflow: hidden;
  }
  .mobile-clear{
    clear:both;
  }
}

＆＃13;

<div class="wrap">
<div class="row">
  <div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/100X200" />
      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div>
   <div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/120X200" />
      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div><div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/150X200" />
      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div><div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/180X200" />
      
      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div>
</div> 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个剧本，

 $('.show').hover(function(){
   var getimg = $(this).find('img').width();
    //alert(getimg);
     $('.mask').css({'width':getimg})

  });

试试这个Demo