如何通过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

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

text-align: center;

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

在行动：

 * { 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; } } 

 <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> 

Answer 3

试试这个脚本，

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

  });

试试这个演示