悬停奇怪边距的图片

时间：2016-06-11 12:44:50

标签： html css image

我有一个图像网格，在悬停时显示名称。它们工作正常，但在悬停时出现小幅度。在JSFiddle中没有发生，但在codepen中正在发生 HTML：

    <section id="portfolio">
      <ul class="grid">
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
      </ul>
    </section>

但在我的结尾使用相同的代码：

enter image description here

2 个答案:

答案 0 :(得分：1)

这个问题发生在您的CodePen和JsFiddle中的 NOT ，因为您在CodePen中使用normalize.css（Reset.CSS会产生相同的效果）

没有normalize.css的片段

#portfolio {
  padding: 20px 0;
}
#portfolio .grid {
  max-width: 100%;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 50px;
  display: inline-block;
  padding: 0;
  list-style: none;
}
#portfolio .grid .item {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  float: left;
}
#portfolio .grid .item-link {
  display: block;
  position: relative;
  overflow: hidden;
}
#portfolio .grid .item-link img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  transform: scale(1);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .grid .item-link .item-overlay {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: rgba(24, 24, 24, 0.7);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .grid .item-link .item-text {
  display: block;
  padding: 0 30px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.75em;
  font-family: "Roboto", sans-serif;
  top: 40%;
  color: #fff;
  transform: translateY(-20px);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .grid .item:hover img {
  transform: scale(1.5);
}
#portfolio .grid .item:hover .item-overlay {
  opacity: 1;
}
#portfolio .grid .item:hover .item-text {
  transform: translateY(0px);
  opacity: 1;
}

@media screen and (min-width: 640px) {
  .item {
    width: 50% !important;
  }

  .description {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .item {
    width: 33.33% !important;
  }
}
@media screen and (min-width: 980px) {
  .item {
    width: 25% !important;
  }
}
@media screen and (min-width: 1280px) {
  .item {
    width: 20% !important;
  }
}
<body>
<section id="portfolio">
      <ul class="grid">
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
      </ul>
    </section>
    </body>

使用normalize.css

的代码段 

#portfolio {
  padding: 20px 0;
}
#portfolio .grid {
  max-width: 100%;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 50px;
  display: inline-block;
  padding: 0;
  list-style: none;
}
#portfolio .grid .item {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  float: left;
}
#portfolio .grid .item-link {
  display: block;
  position: relative;
  overflow: hidden;
}
#portfolio .grid .item-link img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  transform: scale(1);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .grid .item-link .item-overlay {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: rgba(24, 24, 24, 0.7);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .grid .item-link .item-text {
  display: block;
  padding: 0 30px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.75em;
  font-family: "Roboto", sans-serif;
  top: 40%;
  color: #fff;
  transform: translateY(-20px);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .grid .item:hover img {
  transform: scale(1.5);
}
#portfolio .grid .item:hover .item-overlay {
  opacity: 1;
}
#portfolio .grid .item:hover .item-text {
  transform: translateY(0px);
  opacity: 1;
}

@media screen and (min-width: 640px) {
  .item {
    width: 50% !important;
  }

  .description {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .item {
    width: 33.33% !important;
  }
}
@media screen and (min-width: 980px) {
  .item {
    width: 25% !important;
  }
}
@media screen and (min-width: 1280px) {
  .item {
    width: 20% !important;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" rel="stylesheet"/>
<body>
<section id="portfolio">
      <ul class="grid">
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
      </ul>
    </section>
    </body>

答案 1 :(得分：0)

尝试在img标记中添加属性border="0"，如下所示：

 <section id="portfolio">
      <ul class="grid">
        <li class="item"><a href="#" class="item-link"><img src="http://placekitten.com/400/400" alt="Item" border="0"><span class="item-overlay"></span><span class="item-text">Item</span></a></li>
      </ul>
    </section>

因为IE之类的某些浏览器默认显示为图像边框。

相关问题
最新问题