následuje hostující příspěvek Dylana Winn-Browna, který nám ukazuje výkonný způsob, jak dosáhnout tohoto designového efektu.

při nedávné práci na webových stránkách klienta jsem byl požádán o replikaci takového efektu.

Tento typ efektu se používá zejména v situacích typu portfolia, kde návrh zamýšlí zobrazit vizuální i informační detaily.

Existuje mnoho různých možných metod

Jako nikdy předtím vytvořili efekt, jako dříve, začal jsem se podívat na různé způsoby, jak dělat to a narazil na řadu různých metod.

jednou z možností bylo použít Plugin jQuery. Tenhle nebyl úplně ten efekt, po kterém jsem šel, a rozhodně ne příliš lehký.

Další možností bylo umístit <img> do kontejneru a manipulovat s ním pomocí CSS. Zde by mohly být některé potenciální výhody, například možnost nastavit zdroj pomocí srcset , takže použitý obraz je vhodný pro výkon a zařízení.

v mé situaci jsem chtěl řídit efekt zcela v CSS, tak jsem šel na to.

základní funkce

pro dosažení optimálního výkonu jsem se rozhodl použít vlastnost CSS transform pro zpracování zvětšení obrázku. (Animace CSS těží z hardwarové akcelerace a v důsledku toho vypadají plynuleji než jiné metody animace.)

spíše než <img> jsem použil další <div> uvnitř rodiče, abych fungoval jako obrázek. Struktura je:

<div class="parent"> <div class="child"></div></div>

nejprve určíme rozměry nadřazeného prvku. Pak se dítě může vyplnit rodič pomocí width: 100%height: 100%;, stejně jako nastavení obrázku na pozadí, zajistí, že váhy na pokrytí oblasti.

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

do nadřazeného prvku přidáme efekty vznášení, které ovlivní náš podřízený prvek. Zaměření styl je dobrý pro přístupnost stejně:

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

možná Budete chtít použít nástroj pro přidání předpony pro nejlepší možnou podporu prohlížeče.

dokončit základní efekt, můžeme přidat nějaké přechody, aby naše dítě prvek je v normálním stavu:

transition: all .5s;

Pokud chcete přidat barvu překrytí, můžete využít pseudo prvky jako ::before:

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

Nyní, když najedeme na nadřazený prvek, měl by podřízený prvek Zobrazit překrytí barev!

nakonec se budeme zabývat tím, jak přidat nějaký text, který se zobrazí na našem překrytí. Můžeme přidat prvek do naší aktuální podřízený prvek jako tak:

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

můžeme dát naše <span> styl:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

a můžeme je vidět jen tehdy, když jsme hover na .parent:

.parent:hover span,.parent:focus span { display: block;}

Live Demo

Viz Pen Image zoom na hover – portfolio internetových stránek o Dylan (@dwinnbrown) na CodePen.

Mobilní podpora

pokud jsou kontejnery odkazy a stavy vznášení nezobrazují žádné podstatné informace,můžete je nechat na pokoji.