Question

我试图把这个悬停在几乎没有运气的情况下。当我知道有更简单的方法时，我似乎必须继续声明媒体查询。任何建议都会有帮助。你可以在下面找到代码。

谢谢！

.empty_canvas_content {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.containerclaims {
  margin: 0 auto;
  max-width: 1140px;
}
[class*=bit-] {
  float: left;
  padding: .3em;
}
/* Grids */

.box {
  background: #00aabe;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;
}
.box-2 {
  background: #00aabe;
}
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33333%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.66667%;
}
.bit-7 {
  width: 14.28571%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.11111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09091%;
}
.bit-12 {
  width: 8.33333%;
}
.bit-25 {
  width: 25%;
}
.bit-40 {
  width: 40%;
}
.bit-60 {
  width: 60%;
}
.bit-75 {
  width: 75%;
}
.bit-35 {
  width: 35%;
}
.bit-65 {
  width: 65%;
}
.hovereffect {
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #42b078;
}
.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 150px 20px;
}
.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  overflow: hidden;
  padding: 0.5em 0;
  background-color: transparent;
}
.hovereffect h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/* Responsive Goodness */

/* Defaults above are set Desktop resolution or higher */

/* Laptop */

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-7,
  .bit-35,
  .bit-65 {
    width: 100%;
  }
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-8 {
    width: 50%;
  }
  .hovereffect .overlay {
    padding: 130px 20px;
  }
}
/* Tablet */

@media (min-width: 30em) and (max-width: 50em) {
  .bit-10,
  .bit-12,
  .bit-4,
  .bit-6,
  .bit-8 {
    width: 50%;
  }
  .bit-1,
  .bit-11,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9 {
    width: 100%;
  }
  .hovereffect .overlay {
    padding: 120px 20px;
  }
}
/* Mobile */

@media (max-width: 30em) {
  .bit-1,
  .bit-10,
  .bit-11,
  .bit-12,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9 {
    width: 100%;
  }
  .hovereffect .overlay {
    padding: 110px 20px;
  }
}

<div class="containerclaims">

  <div class="bit-2">
    <div class="hovereffect">
      <img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
      <div class="overlay">
        <h2>Effect 13</h2>
        <p>
          <a href="#">LINK HERE</a>
        </p>
      </div>
    </div>
  </div>

  <div class="bit-2">
    <div class="hovereffect">
      <img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
      <div class="overlay">
        <h2>Effect 13</h2>
        <p>
          <a href="#">LINK HERE</a>
        </p>
      </div>
    </div>
  </div>

</div>

</div>

Answer 1

像这样编辑.hovereffect .overlay

.hovereffect .overlay {
  width: 100%;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 0;
  text-align: center;
  transform: translateY(-50%);
}

JsFiddle link

或如果您的支持允许，请使用flexbox。

同时从媒体查询中的padding中删除所有.hovereffect .overlay

Answer 2

如果您可以使用flexbox，请在overlay：

上尝试此更改

* {  margin: 0;padding: 0;box-sizing: border-box;}
.containerclaims {margin: 0 auto;max-width: 1140px;}
[class*=bit-] {float: left;padding: .3em;}
.bit-2 {width: 50%;}

/*Changes Here*/
.hovereffect {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #42b078;
}
.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/*End Changes*/

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  overflow: hidden;
  padding: 0.5em 0;
  background-color: transparent;
}
.hovereffect h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<div class="containerclaims">
  <div class="bit-2">
    <div class="hovereffect">
      <img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
      <div class="overlay">
        <h2>Effect 13</h2>
        <p>
          <a href="#">LINK HERE</a>
        </p>
      </div>
    </div>
  </div>
  <div class="bit-2">
    <div class="hovereffect">
      <img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
      <div class="overlay">
        <h2>Effect 13</h2>
        <p>
          <a href="#">LINK HERE</a>
        </p>
      </div>
    </div>
  </div>
</div>

以悬停覆盖为中心

2 个答案: