PrestaShop 1.6 - Hover image + Prechod (efekt) css

Kaper · **Registrován:** 06 čer 2014 19:28 **Příspěvky:** 607

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;    
}

Radek Plašil · **Registrován:** 30 čer 2009 09:14 **Příspěvky:** 8504

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).

Kaper · **Registrován:** 06 čer 2014 19:28 **Příspěvky:** 607

Ďakujem za super odpoveď!

Akurát to nefunguje správne

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

Radek Plašil · **Registrován:** 30 čer 2009 09:14 **Příspěvky:** 8504

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;

Kaper · **Registrován:** 06 čer 2014 19:28 **Příspěvky:** 607

Wau! Ďakujem krásne

. Funguje skvele! Ste super

Kaper · **Registrován:** 06 čer 2014 19:28 **Příspěvky:** 607

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

Radek Plašil · **Registrován:** 30 čer 2009 09:14 **Příspěvky:** 8504

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í.

Kaper · **Registrován:** 06 čer 2014 19:28 **Příspěvky:** 607

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

Radek Plašil · **Registrován:** 30 čer 2009 09:14 **Příspěvky:** 8504

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.

Kaper · **Registrován:** 06 čer 2014 19:28 **Příspěvky:** 607

Ď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

Návody pro C4

Webhosting C4

PrestaShop 1.6 - Hover image + Prechod (efekt) css

Kdo je online

FTP Uploader

PrestaShop partneři

PrestaShop Hosting