Följande är ett gästpost av Dylan Winn-Brown, som visar oss ett performant sätt att uppnå denna designeffekt.

När jag arbetade på en kunds webbplats nyligen blev jag ombedd att replikera en effekt som denna.

denna typ av effekt används särskilt i portföljtypssituationer där designen avser att visa både visuella och informativa detaljer.

det finns många olika möjliga metoder

eftersom jag aldrig hade skapat en sådan effekt tidigare började jag titta på olika sätt att göra detta och kom över ett antal olika metoder.

ett alternativ var att använda en jQuery Plugin. Den här var inte riktigt den effekt jag var ute efter, och verkligen inte särskilt lätt.

ett annat alternativ var att placera ett <img> I behållaren och manipulera det med CSS. Det kan finnas några potentiella fördelar här, som att kunna ställa in källan med srcset så att bilden som används är prestanda och enhetsanpassad.

i min situation ville jag hantera effekten helt i CSS, så jag gick för det.

grundläggande funktionalitet

för att uppnå optimal prestanda bestämde jag mig för att använda egenskapen CSS transform för att hantera utvidgningen av bilden. (CSS-animationer dra nytta av hårdvaruacceleration och som ett resultat verkar smidigare än andra animeringsmetoder.)

snarare än ett <img>använde jag ett extra <div> inuti föräldern för att fungera som bilden. Strukturen är:

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

först anger vi dimensionerna för moderelementet. Då kan barnet fylla föräldern med width: 100%och height: 100%;, samt ställa in bakgrundsbilden, så att den skalar för att täcka området.

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

vi lägger sedan till svävareffekter till vårt överordnade element som påverkar vårt barnelement. En fokusstil är också bra för tillgänglighet:

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

Du kanske vill använda ett verktyg för att lägga till prefix för bästa möjliga webbläsarsupport.

för att avsluta den grundläggande effekten kan vi lägga till några övergångar till vårt barnelements normala tillstånd:

transition: all .5s;

Om du vill lägga till ett färgöverlägg kan du använda pseudoelement som ::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;}

Nu när vi svävar på föräldraelementet ska barnelementet visa ett färgöverlägg!

slutligen täcker vi hur du lägger till lite text som ska visas på vårt överlägg. Vi kan lägga till ett element till vårt nuvarande barnelement så här:

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

Vi kan ge vårt <span> någon stil:

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

och vi kan bara göra det synligt när vi svävar på .parent:

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

Live Demo

se pennan bilden zooma på hover – portfölj webbplatser av Dylan (@dwinnbrown) på CodePen.

mobil Support

om behållarna är länkar och hover-tillstånden inte avslöjar någon väsentlig information kan du bara lämna den ensam.