A következő egy vendég bejegyzést Dylan Winn-Brown, aki megmutatja nekünk egy performant módon elérni ezt a tervezési hatás.

miközben a közelmúltban egy ügyfél webhelyén dolgoztam, felkértek, hogy replikáljak egy ilyen hatást.

Ez a fajta hatás különösen olyan portfólió típusú helyzetekben használatos, ahol a terv mind vizuális, mind információs részleteket kíván megjeleníteni.

számos különböző lehetséges módszer létezik

mivel még soha nem hoztam létre ilyen hatást, elkezdtem megvizsgálni ennek különböző módjait, és számos különböző módszerrel találkoztam.

az egyik lehetőség egy jQuery Plugin használata volt. Ez nem olyan hatás volt, mint amire vágytam, és természetesen nem túl könnyű.

egy másik lehetőség az volt, hogy egy <img> – t helyezünk el a tárolóban, és manipuláljuk CSS-sel. Itt lehet néhány lehetséges előny, mint például a forrás beállítása a srcset segítségével, hogy a használt kép teljesítmény és eszköz megfelelő legyen.

Az én helyzetemben teljes egészében a CSS-ben akartam kezelni a hatást, ezért erre mentem.

alapvető funkciók

az optimális teljesítmény elérése érdekében úgy döntöttem, hogy a CSS transform tulajdonságot használom a kép nagyításának kezelésére. (A CSS animációk a hardveres gyorsítás előnyeit élvezik, ennek eredményeként simábbnak tűnnek, mint más animációs módszerek.)

helyett egy <img>, használtam egy további <div> belül a szülő, hogy jár, mint a kép. A struktúra:

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

először megadjuk a szülőelem méreteit. Ezután a gyermek kitöltheti a szülőt a width: 100% és height: 100%; segítségével, valamint beállíthatja a háttérképet, biztosítva, hogy a skálák lefedjék a területet.

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

ezután hover effektusokat adunk a szülő elemünkhöz, amelyek befolyásolják gyermek elemünket. A fókusz stílus jó a hozzáférhetőséghez is:

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

érdemes lehet egy eszközt használni előtagok hozzáadásához a lehető legjobb böngészőtámogatáshoz.

az alaphatás befejezéséhez hozzáadhatunk néhány átmenetet a gyermek elem normál állapotához:

transition: all .5s;

ha színes átfedést szeretne hozzáadni, használhat olyan pszeudo elemeket, mint például a ::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;}

Most, amikor a szülő elemre mutatunk, a gyermek elemnek színes átfedést kell mutatnia!

végül lefedjük, hogyan kell hozzáadni néhány szöveget, hogy megjelenjen az átfedésünkön. A jelenlegi gyermek elemhez így adhatunk hozzá egy elemet:

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

megadhatjuk a <span> néhány stílust:

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

és csak akkor tudjuk láthatóvá tenni, ha a .parent:

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

élő Demo

lásd a toll kép nagyítása hover – Portfólió honlapok Dylan (@dwinnbrown) a CodePen.

Mobile Support

Ha a konténerek linkek, és a hover Államok nem mutatnak semmilyen lényeges információt, akkor lehet, hogy csak hagyja békén.