Nyt on määritetty nuo reunat kuvalle, ja overlay, jossa ei ole reunoja on 100% x 100% eli peittää kuvan täysin. Joko täytyy määritellä reunat koko tuolle diville, joka pitää kuvan ja overlayn sisällään, kuvan reunojen sijasta ja pienentää overlay ja kuvan skaalaus siten, että jää muutama pikseli reunoille. Itse lähtisin ehkä määrittelemään .hlista imgin reunat diville .hlista:
border: 1px solid #eee;
padding: 5px;
background:rgba(255,255,255,0.4);
Josko noin toimis Heittelen vain ideoita, ei oo mahdollista päästä testaamaan itse eli ei välttämättä toimi
@birdie https://pastebin.com/vT5WRmzC Tuossa se, minkä irrotin. Äkkiseltään JSFiddlessä testattuna muotoili sinun koodisi saman näköiseksi kuin lainakoodini Liekö tästä yhtään sen enempää apua.
Edit: // Tästä poistettu kaikki ylimääräinen. Luulisin? Tuossa ylemmässä oli jotain otsikoiden muotoiluja.
En tähän hätään jaksa lähtee itse kikkailemaan koodin kanssa, mutta täältä löytyy samanmoista valmista koodia ohjeineen (enkuks tosin) noihin hoverjuttuihin. Ihan samanlainen ei ole, mutta oisko mitään jelppiä?
@vp mun mielestä lisäsin ne sinne, täytyy tutkia vielä tarkemmin kun pääsen töistä ja toi malli asia oli hyvä huomio, otin ihan erimallin mitä oon aikasemmin käyttänyt
Voit esim käyttää ennen tulostusta randomizeria ja randomoida vaikka luvun väliltä 0-1 tai 0-100 ja asettaa sen arvon muuttujalle x. Ja tehdä if-lauseet joko että if x = 0 (jos väli 0-1, 50% mahku saada 0 ja 50% mahku saada 1) tai if x % 2 = 0 (kun väli 0-100 niin onko pariton luku vai ei, 50% mahdollisuus on todenmukaisempi kun väli isompi).
Esim jos teet ekalla niin if x = 0 kohdassa tulostaisit ekan arvon ja else kohdassa tokan arvon.
Kaks sisäkkäistä diviä, ekassa divissä hevosen kuva. Sen divin sisällä toinen divi, jossa hepan nimi. Oletuksena hepan nimi display:none; ja kun kuvadivi on hover niin sillom hepan nimi-divi display:block;. Sijainnin saat määriteltyy laittamalla nimidivin positioniks absolute, kuvadiville realtive ja sit nimidivin sijainti margineilla.
