-2
对于我的生活，我无法弄清楚如何在图像上添加一个“立即购买”按钮叠加，并保持响应...按钮叠加悬停，而不是悬停
我我正在使用柠檬水框架，并希望保持这一点而不是引导。
关于如何纠正代码的任何想法？ 下面是一个柠檬水框架的例子。
任何建议将非常感激。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
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%;
}
/* Responsive Goodness */
/* Defaults above are set Desktop resolution or higher */
/* Laptop */
@media (min-width: 50em) and (max-width: 68.75em) {
.bit-2,
.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-2,
.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">
<div class="bit-3">
<img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
</div>
<div class="bit-3">
<img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
</div>
<div class="bit-3">
<img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
</div>
</div>
是的，但你可以做一个版本，在那里它不是一个悬停，并就在那里？我希望它会浮在图像的中心，而不是陷入底部。 – adambwhitten
@adambwhitten：检查更新的答案，**现在购物**将浮在中心！ – Pugazh
对不起，让我复制这个，所以我有非悬停版本。你可以再次抛出悬停版本吗？ – adambwhitten