Právě je 10 kvě 2021 09:42

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]




Odeslat nové téma Odpovědět na téma  [ Příspěvků: 18 ]  Přejít na stránku 1, 2  Další
Autor Zpráva
 Předmět příspěvku: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 24 dub 2015 10:14 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
604
Zdravím,

Postupoval som podla tohto návodu : (je to v Španielčine)
Kód:
http://pelechano.es/efecto-rollover-listados-prestashop-1-5-y-1-6/


Funguje super, ale mal by som otázku, ako pridám efekt do prechodu k tomu druhému obrázku ? Napr ako niečo takéto :
Kód:
http://madame-fs.com/prestashop/glamour/demo3/en/3-women


Jednoducho len nejaký plynulý animovaný prechod, alebo niečo podobné.

Ďakujem pekne.

CSS k týmto obrázkom vyzerá takto :
Kód:
  ul.product_list .product-image-container a:hover img.img_0{
    display: none;
}
ul.product_list .product-image-container a img.img_1{   
    display:none;
}
ul.product_list .product-image-container a:hover img.img_1{   
    display: block;   
}


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 27 dub 2015 12:59 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7926
Dobrý den,

efektu přechodu mezi obrázky můžete dosáhnout např. pomocí CSS vlastnosti transitions a změny průhlednosti. Celý zdrojový kód pak bude vypadat např.:
Kód:
ul.product_list .product-image-container a img.img_1{   
  position:absolute;
  top:9px;
  left:9px;
  opacity:0;
  -webkit-transition: opacity 0.5s; /* Safari */
  transition: opacity 0.5s;
}
ul.product_list .product-image-container a:hover img.img_1{   
  opacity:1;
}

Druhý obrázek má ve výchozím stavu nastavenou pozici na prvním obrázku a nulovou průhlednost opacity:0, takže není vidět. A pokud na něj najedete kurzorem, tak se jeho průhlednost zruší pomocí vlastnosti opacity:1 a vlastnost transition zajistí plynulý přechod (aktuálně 0.5 sekundy).

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 27 dub 2015 13:20 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
604
Ďakujem za super odpoveď! :) Akurát to nefunguje správne :(

Toto je výsledok, druhý obrázok je nejak posunutý doľava


Přílohy:
chyba.jpg
chyba.jpg [ 92.78 KiB | Zobrazeno 2311 krát ]
Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 27 dub 2015 15:52 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7926
Dobrý den,

v obchodě totiž nepoužíváte standardní velikosti obrázků, takže použijte předchozí kód a pouze si na řádku:
Kód:
  left:9px;
změňte pozici obrázku z levé strany např. na:
Kód:
  left:54px;

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 27 dub 2015 18:32 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
604
Wau! Ďakujem krásne :). Funguje skvele! Ste super


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 16 kvě 2015 09:57 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
604
Zdravím, potreboval by som ešte prosím poradiť. Obrázky sa zle prekrývajú ak sa stránka prezerá na tablete / mobile. Viď príloha.

Ďakujem pekne za pomoc


Přílohy:
chyba.jpg
chyba.jpg [ 194.24 KiB | Zobrazeno 2215 krát ]
Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 18 kvě 2015 13:31 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7926
Dobrý den,

musíte si tedy ještě doplnit jinou pozici obrázku z levé strany pro dané rozlišení/šířku stránky. Takže do souboru s CSS přidejte např. řádky:
Kód:
@media (max-width: 1199px) {
   ul.product_list .product-image-container a img.img_1 {
      left:16px;
   }
}

Pomocí kódu se do maximální šířky stránky 1199px nastaví obrázku pozice z levé strany na 16px. A stejným způsobem si změňte pozici obrázku i pro ostatní rozlišení obrazovky, při kterém dochází k chybnému zobrazení.

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 18 kvě 2015 17:53 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
604
Rozumiem, môžem sa spýtať, ako to ešte nastaviť pri mobilnom zobrazení? Pri tabletovom to vyzerá ok, ale keď stiahnem okno do šírky mobilného responzívneho designu, tak mi v css berie hodnotu z @media (max-width: 1199px).

Ďakujem


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 19 kvě 2015 11:15 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7926
Dobrý den,

musíte si právě doplnit stejné řádky i pro další rozlišení, u kterých potřebujete mít jinou pozici obrázku. Takže například pro maximální šířku max-width rozlišení 479px, 767px a 991px.

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop 1.6 - Hover image + Prechod (efekt) css
PříspěvekNapsal: 19 kvě 2015 13:10 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
604
Ďakujem za odpoveď, pridal som všetky tieto max-width rozlíšenia, ale bohužiaľ stále mi to pri určitých veľkostiach zle zobrazuje a neberie mi to z toho CSS. Kde je prosím problém?
Hlavne pri mobilnom zobrazení, kde sú produkty pod sebou v jednom stĺpci.

Ďakujem


Nahoru
 Profil  
 
Zobrazit příspěvky za předchozí:  Seřadit podle  
Odeslat nové téma Odpovědět na téma  [ Příspěvků: 18 ]  Přejít na stránku 1, 2  Další

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků


Nemůžete zakládat nová témata v tomto fóru
Nemůžete odpovídat v tomto fóru
Nemůžete upravovat své příspěvky v tomto fóru
Nemůžete mazat své příspěvky v tomto fóru
Nemůžete přikládat soubory v tomto fóru

Hledat:
Přejít na:  
cron
FTP Uploader
Staňte se naším zákazníkem!
Hledáme kolegy
PrestaShop partneři

Seznam všech partnerů

PrestaShop Hosting
Návody pro C4

© 2009-2021 ČESKÝ WEBHOSTING s.r.o. Kontaktní e-mail: forum@c4.cz
Diskuzní fórum využívá technologie: phpBB, phpBB-SEO.com, phpBB.cz