Question

我需要悬停叠加层与图像的宽度相同。具有该叠加效果的所有图像都是不同的大小，但使用相同的类。我找到了类似问题的答案，但它们都包括我需要css“绝对”和“相对”属性反过来。我尝试了，但它使悬停效果停止工作。任何有关此问题的帮助将非常感谢。谢谢，海伦

P.S.:Just所以你知道，我对编码很新，而且我不是英语母语者......

     <!-- HTML mark-up -->

      <div class="container">
           <a href="#img1">
  <img src="resources/img/hgdgdg_TH1.jpg" class="thumbnail" id="linathi_1">
      <div class="overlay">
          <div class="caption"><i class="ion-ios-pricetag">&nbsp;&euro;150</i></div>
      </div>
    </a>
 </div>


/* CSS OVERLAY ON HOVER */

.container { 
    position: relative;
    width: 100% /*50%*/;
}

.thumbnail /* image */ {
    display: block;
    width: 100%;
    height: auto;
}
.overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(180, 81, 64, 0.85);
    overflow: hidden;
    width: 100%;
    height: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.caption {
  white-space: nowrap; 
font-family: 'Assistant', 'Arial', sans-serif;
    font-style: normal;
  font-size: 130%;
    color: #fff;
  position: absolute;
  overflow: hidden;
  top: 50%;
left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

Answer 1

SQL> with tbl as (
  2    select null c1, null c2 from dual union all
  3    select 'a' c1, 'a' c2 from dual union all
  4    select 'a' c1, 'b' c2 from dual union all
  5    select 'a,a' c1, 'a,b' c2 from dual union all
  6    select 'a,a' c1, 'a,b,a' c2 from dual union all
  7    select 'a,a,b' c1, 'a,b,a' c2 from dual union all
  8    select 'a,,b' c1, ',b,a' c2 from dual union all
  9    select 'a,' c1, 'd,' c2 from dual
 10    )
 11  select comparesepval(c1, c2) c, c1, c2 from tbl;

         C C1    C2
---------- ----- -----
         1       
         1 a     a
         0 a     b
         0 a,a   a,b
         0 a,a   a,b,a
         1 a,a,b a,b,a
         1 a,,b  ,b,a
         0 a,    d,

8 rows selected

<div class="container">
  <a href="#img1">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" class="thumbnail" id="linathi_1">
  <div class="overlay">
      <div class="caption"><i class="ion-ios-pricetag">&nbsp;&euro;150</i></div>
  </div>
</a>

使叠加宽度/大小与图像相同

1 个答案: