Forum » Izdelava spletišč » Obračanje oz. prikaz druge slike pri hooverju z miško
Obračanje oz. prikaz druge slike pri hooverju z miško
ziglav7 ::
Pozdravleni,
sem bolj backend programer, moram pa občasno urediti tudi kaj na frontendu. Trenutno imam problem s katerim se ukvarjam že kar nekaj časa in bi vas prosil za pomoč.
Imam prikaz "kartic", ki jih je več v vrsti in so v več vrstah (odvisno od števila izdelkov v posamezni kategoriji).
Izgledajo nekako tako: link. Želel bi, da se slika obrne tako, kot v tem primeru. Obračanje sem že uspel doseči, a se mi nato podre vse ostalo (prekrivanje, kdaj pokaže 2 sliki, ...)
Bi mi kdo lahko pomagal? Možna je uporaba tudi kakšne css/js knjižnice.
Lep dan še naprej
sem bolj backend programer, moram pa občasno urediti tudi kaj na frontendu. Trenutno imam problem s katerim se ukvarjam že kar nekaj časa in bi vas prosil za pomoč.
Imam prikaz "kartic", ki jih je več v vrsti in so v več vrstah (odvisno od števila izdelkov v posamezni kategoriji).
Izgledajo nekako tako: link. Želel bi, da se slika obrne tako, kot v tem primeru. Obračanje sem že uspel doseči, a se mi nato podre vse ostalo (prekrivanje, kdaj pokaže 2 sliki, ...)
Bi mi kdo lahko pomagal? Možna je uporaba tudi kakšne css/js knjižnice.
Lep dan še naprej
smacker ::
Bulma ti prepiše nekatere lastnosti, zato ti ne dela. Na hitro sem vsem dal !important, rešitev maš tu: https://jsfiddle.net/qLrujzdm/
Pa manjkali so ti classi v HTML, verjetno ker si poskušal na različne načine rešit.
Pravilneje bi bilo, da z code inspectorjem odkriješ katere CSS property-e ti Bulma prepiše in tiste pač kako drugače nastaviš.
Če te zanima zakaj se to dogaja oz. kako to preprečiš, preberi to: https://developer.mozilla.org/en-US/doc...
Pa manjkali so ti classi v HTML, verjetno ker si poskušal na različne načine rešit.
Pravilneje bi bilo, da z code inspectorjem odkriješ katere CSS property-e ti Bulma prepiše in tiste pač kako drugače nastaviš.
Če te zanima zakaj se to dogaja oz. kako to preprečiš, preberi to: https://developer.mozilla.org/en-US/doc...
Netrunner ::
Poglej si na netu ker imaš skript za take zadeve malo morje. Samo vzameš eno in se ne rabiš sam hecat s tem.
Doing nothing is very hard to do... you never know when you're finished.
ziglav7 ::
Hvala za odgovore.
@smacker: Mogoče sem malo čudno napisal, cilj je, da se obrača samo slikca. Napis pod njo pa je vedno enak. Ko premaknem css classe tako, kot se mi zdi logično se stvari vedno le prekrivajo in ne deluje tako, kot bi si želel.
@#000: Kakšne skripte? Daš kak nasvet kako kaj takga poiskati.. sem namreč res zelo neizkušen v frontendu.
@smacker: Mogoče sem malo čudno napisal, cilj je, da se obrača samo slikca. Napis pod njo pa je vedno enak. Ko premaknem css classe tako, kot se mi zdi logično se stvari vedno le prekrivajo in ne deluje tako, kot bi si želel.
@#000: Kakšne skripte? Daš kak nasvet kako kaj takga poiskati.. sem namreč res zelo neizkušen v frontendu.
Netrunner ::
V google napiši javascrip css flipcard. Sklepam da uporabljaš jquery kot večina na frontendu kar ti bo še tolik olajšalo vse skupaj. Načeloma lahko narediš samo z CSS-i ali z JS oz. kombinaciji obojega. Če hočeš da se obrne samo kartica potem moraš tekst dati v drugi element kateri je preko "flip card-a". Trenutno nimam časa za kaj več napisat :)
Doing nothing is very hard to do... you never know when you're finished.
Arey ::
Glede na to da si našel popoln primer kako narest točno to kar rabiš (brez kakršnega koli JSja, kot se spodobi), ti bolj ne moremo pomagat.
Poglej fiddle ki si ga prilimal, in ga prenesi v tvoj primer. "card-image" div v tvojem želenem rezultatu je "flip-box" div v fiddlu. Odpri page inspectorja in poglej kakšna je razlika med tvojo in želeno kodo.
Poglej fiddle ki si ga prilimal, in ga prenesi v tvoj primer. "card-image" div v tvojem želenem rezultatu je "flip-box" div v fiddlu. Odpri page inspectorja in poglej kakšna je razlika med tvojo in želeno kodo.
Vredno ogleda ...
| Tema | Ogledi | Zadnje sporočilo | |
|---|---|---|---|
| Tema | Ogledi | Zadnje sporočilo | |
| » | Nekaj vprašanj glede izdelave spletne strani.Oddelek: Izdelava spletišč | 4690 (3541) | scipascapa |
| » | Od dizajna do programiranja spletne straniOddelek: Programiranje | 7023 (4447) | Arey |
| » | CSS tezava z ozadjiOddelek: Izdelava spletišč | 884 (677) | tadejp81 |
| » | CSS pomocOddelek: Izdelava spletišč | 1729 (1434) | Neumann |
| » | Kaj se učitiOddelek: Izdelava spletišč | 2541 (1972) | MrBrdo |