Autor Zpráva
SEID
Profil *
dobry vecer, chcem sa spytat jednu blbost :(

som zaciatocnikom html a css, ale chcem sa spytat, ako vytvorim nieco otaketo:

adaptic.cz/znalosti/slovnicek/css/

na pravo dole je odkaz na FB a Twitter, je to spravene ako obrazok a po najazde nan sa obrazok ako keby posunie do hora :(

neviem ako nieco take vytvorit a ci to s css a html vobec ide :(

dakujem vam velmi pekne

Moderátor Petr ZZZ: Titulek „ako vytvorit...“ nevystihoval podstatu dotazu. Příště zkus prosím vymyslet lepší.
Cynik
Profil
Ano, lze to udělat, a poměrně snadno :)

Nejjednodušší cesta:
<style type="text/css">
.img:hover
{
position: relative;
top: -10px;
}
</style>

<img src="URL_OBRAZKU" class="img">
Bubák
Profil
Cynik:
jjednodušší cesta:
Se zásadní nevýhodou, obrázek před myší uskočí, což je nepříjemné, pokud najedeš za směru, odkud obrázek uskočí, v tomto případě zespodu, viz ukázka s třídou img1
SEID:
Jde to jak obrázkem (třída img2), tak i obrázkem na pozadí (třída img3).
http://kod.djpw.cz/pfdb
http://kod.djpw.cz/pfdb-

Zkus příště pojmenovat téma lépe, jak by to bypadalo, kdyby se polovina zdejších témat jmenovala „ako vytvorit...a druhá polovina by se jmenovala „problém?
jefitto44
Profil
dá sa to aj cez marginy... dáš záporný margin pri hoveri a pomocou transition:all 300ms linear; sa ti to animuje
karlos1
Profil *
jefitto44:
dá sa to aj cez marginy...
Neřeší problém, kdy najedu ze strany, odkud element uskočí marginem pryč a bude problikávat.

pomocou transition:all 300ms linear;
... Nemá dostatečnou podporu.
Trejpa
Profil
Cynik:
Relativní pozici je třeba nastavit bez :hover, v :hover uvádět jen její změnu. Jinak si koleduješ o problém.

jefitto44, karlos1, SEID:
Zařídil bych to stejným paddingem na obrázku - jednou nahoře, podruhé dole: Živá ukázka
jefitto44
Profil
karlos1:
Neřeší problém, kdy najedu ze strany, odkud element uskočí marginem pryč a bude problikávat.
NEviem ako to myslíš, mne nič nepreblikáva

... Nemá dostatečnou podporu.
Čo to je dostatočná podpora?
jenikkozak
Profil
jefitto44:
NEviem ako to myslíš, mne nič nepreblikáva
Nereagují tak všechny prohlížeče. Najedeš myší na prvek, on uskočí, vyruší se mu :hover, čímž se vrátí zpět, znovu se aktivuje :hover

Čo to je dostatočná podpora?
Zřejmě něco víc než 82 %. Na tom přece nezáleží.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: