1
我想中心这个悬停在躺着几乎没有任何运气。 似乎我必须不断声明媒体查询，当我知道有一个更简单的方法。任何建议都会有帮助。你可以找到下面的代码。围绕悬停覆盖
谢谢！
.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>
请问您的支持允许Flexbox的HTTP：/ /caniuse.com/#feat=flexbox？ – DaniP