-2
Für das Leben von mir, ich kann nicht herausfinden, wie eine „Shop Now“ Taste Overlay auf einem Bild hinzuzufügen, und es reagiert, hält ...Button-Overlay auf schweben, und nicht auf Hover
I verwende das Limonade-Framework und möchte das statt Bootstrap beibehalten.
Irgendwelche Ideen, wie ich den Code richtig machen würde? Unten ist eine Probe des Limonadengerüsts.
Alle Vorschläge würden sehr geschätzt werden.
* {
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>
JA aber können Sie tun, um eine Version, wo es ist kein schweben, und gerade dort? Und ich hatte gehofft, es würde einfach in der Mitte im Bild schweben, anstatt auf dem Boden zu bleiben. – adambwhitten
@adambwhitten: Überprüfen Sie die aktualisierte Antwort, ** Shop now ** wird in der Mitte schweben! – Pugazh
Es tut mir leid, lass mich das kopieren, also habe ich die nicht-Hover-Version. Kannst du die Hover-Version wieder hochwerfen? – adambwhitten