【发布时间】：2016-12-23 02:53:27
【问题描述】：
我试图在悬停时向图像添加文本。也许我需要重新审视自己做错了什么？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
max-width: 947px;
}
[class*=bit-] {
float: left;
padding: .3em;
position: relative;
}
button {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #fff;
border:none;
display: none;
cursor: pointer;
background-color: black;
height: 30px;
width: 30%;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.static {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #fff;
border:none;
display: block;
cursor: pointer;
background-color: black;
height: 30px;
width: 30%;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
}
p.important {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size:12px;
color:#fff;
display: none;
width: 50%;
left: 50%;
top: 80%;
position: absolute;
transform: translate(-50%, -50%);
text-align:center;
}
.imgHover {
max-width: 100%;
max-height: 100%;
transition: .2s all;
}
.imgHover img:hover {
-webkit-filter: brightness(50%);
}
.imgHover:hover button {
display: initial;
}
.imgHover:hover .important {
display: initial;
}
/* 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%;
}
/* 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%;
}
}
/* 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%;
}
}
/* 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%;
}
}<div class="container">
<!-- Hero Image -->
<div class="bit-1">
<div class="box">hero</div>
</div>
<!-- Mini CSS Slider -->
<div class="bit-1">
<div class="box">mini slider</div>
</div>
<!-- Story1 with Rollover Hover -->
<div class="bit-2">
<div class="imgHover"><img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%">
<p class="important">Hey there.</p>
<button>Shop Now</button>
</div>
</div>
<!-- Story2 with Rollover Hover -->
<div class="bit-2">
<div class="imgHover"><img src="http://i.imgur.com/0hFyr98.jpg" width="100%"><button>Shop Now</button></div>
</div>
<!-- Story3 with Rollover Hover -->
<div class="bit-2">
<img src="http://i.imgur.com/0hFyr98.jpg" width="100%"><button class="static">Shop Now</button>
</div>
<!-- Story4 with Rollover Hover -->
<div class="bit-2">
<img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%"><button class="static">Shop Now</button>
</div>
<!-- Skinny Banner -->
<div class="bit-1">
<div class="box">small banner</div>
</div>
<!-- Rewards -->
<div class="bit-2">
<div class="box">rewards</div>
</div>
<!-- Store Locator -->
<div class="bit-2">
<div class="box">store locator</div>
</div>
</div>所以这是我最初拥有的屏幕截图，它使用相同的代码运行良好。所以也许我错过了什么？任何建议将不胜感激。
【问题讨论】：
标签： html css image hover responsive