html - 将带有图像的 Alpha mask 溢出 div 悬停

Question

所以我创建了一个可缩放的 div，其中包含两个图像。带有图像的 div 可以很好地缩放，关于字体大小的可缩放性，我知道我可以使用媒体查询。然而，悬停 alpha 蒙版溢出，我不知道如何使它 100% 到图像 div。我希望我能正确地解释自己。无论如何here is the live JS , HTML,

         <div class="My-Gems">
                 <h2 class="Second-Header">Latest Works</h2>

                <div class="item item-type-double">
                    <div class="item-img">
                        <img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " style="width:100%;" alt="" />
                    </div>
                    <a class="item-hover">
       <div class="item-info">
           <div class="mycell">
        <div class="date">Branding</div>           
        <div class="line"></div>            
        <div class="headline">Money Matters</div>
        <div class="line"></div>
           </div>
       </div>
     <div class="mask"></div>
   </a>


                </div>
                <div class="item item-type-double"> 
                    <div class="item-img">
                        <img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" style="width:100%;"/>
                    </div>
                    <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
       <div class="item-info">
           <div class="mycell">
        <div class="date">Events</div>           
        <div class="line"></div>            
        <div class="headline">Metaphon Fitness</div>
        <div class="line"></div>
           </div></div>
    <div class="mask"></div>
   </a>


                </div>
            </div>
            <!-- end of my-gems-->

还有 CSS:

.My-Gems {
    width: 100%;
    height: 100%;
}

h2.Second-Header {
    color: black;
    font-weight:400;
    font-family:'Abril Fatface', cursive;
    font-size: 3em;
    margin: 80px;
}


.item {
    text-align:center;
    float:left;
    position:relative;
}
.item {
    width: 50%;
    height: 100%;
}

.item-hover, .item-hover .mask, .item-img, .item-info {
    width: 100%;
    height: 100%;
}

.item-hover, .item-hover .mask {
    position:absolute;
    top:0;
    height:100%;
    left:0;
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-decoration:none;
    text-align:center;
}
.item-type-double .item-info {
    z-index:10;
    color:#ffffff;
    display:table;
    position:relative;
    z-index:5;
}

.item-type-double .item-info div.mycell {
    vertical-align:middle;
    height: 100%;
    display:table-cell;
}
.item-type-double .item-info .headline {
    font-size:2.4em;
    font-family:'open sans';
    text-transform: uppercase;
    width:90%;
    margin:0 auto;
}
.item-type-double .item-info .date {
    font-size:20px;
    font-family:'Canter';
    text-transform: uppercase;
}
.item-type-double .item-hover .mask {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:0.5;
    z-index:0;
}
.item-type-double .item-hover:hover .line {
    width:90%;
}
.item-type-double .item-hover:hover {
    opacity:1;
}
.item-img {
    width:100%;
    z-index:0;


}

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
}

Answer 1

你的问题是因为 img 默认情况下 display:inline 造成了一个小间隙

所以你只需要将它添加到你的 CSS 中:

.item-img img {
    display:block
}

这里有一个完整的片段:

body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
}
.My-Gems {
    width: 100%;
    height: 100%;
}
h2.Second-Header {
    color: black;
    font-weight:400;
    font-family:'Abril Fatface', cursive;
    font-size: 3em;
    margin: 80px;
}
.item {
    text-align:center;
    float:left;
    position:relative;
}
.item {
    width: 50%;
    height: 100%;
}
.item-hover, .item-hover .mask, .item-img, .item-info {
    width: 100%;
    height: 100%;
}
.item-hover, .item-hover .mask {
    position:absolute;
    top:0;
    height:100%;
    left:0;
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-decoration:none;
    text-align:center;
}
.item-type-double .item-info {
    z-index:10;
    color:#ffffff;
    display:table;
    position:relative;
    z-index:5;
}
.item-type-double .item-info div.mycell {
    vertical-align:middle;
    height: 100%;
    display:table-cell;
}
.item-type-double .item-info .headline {
    font-size:2.4em;
    font-family:'open sans';
    text-transform: uppercase;
    width:90%;
    margin:0 auto;
}
.item-type-double .item-info .date {
    font-size:20px;
    font-family:'Canter';
    text-transform: uppercase;
}
.item-type-double .item-hover .mask {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:0.5;
    z-index:0;
}
.item-type-double .item-hover:hover .line {
    width:90%;
}
.item-type-double .item-hover:hover {
    opacity:1;
}
.item-img {
    width:100%;
    z-index:0;
}
.item-img img {
    width:100%;
    display:block
}

<div class="My-Gems">
  <h2 class="Second-Header">Latest Works</h2>
  <div class="item item-type-double">
    <div class="item-img">
      <img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " alt="" />
    </div>
    <a class="item-hover">
      <div class="item-info">
        <div class="mycell">
          <div class="date">Branding</div>
          <div class="line"></div>
          <div class="headline">Money Matters</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="mask"></div>
    </a>
  </div>
  <div class="item item-type-double">
    <div class="item-img">
      <img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" />
    </div>
    <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
      <div class="item-info">
        <div class="mycell">
          <div class="date">Events</div>
          <div class="line"></div>
          <div class="headline">Metaphon Fitness</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="mask"></div>
    </a>

  </div>
</div>
<!-- end of my-gems-->