Hoe maak je een Image Hover-effect in CSS

Zweefeffecten voor afbeeldingen kunnen uw website een extra glans geven. Ze creëren een vloeiend effect, waardoor het navigeren in afbeeldingengalerijen of carrousels aangenamer wordt. Het beste deel is dat je deze effecten kunt creëren met alleen CSS en geen JavaScript.

U kunt verschillende animatiestijlen op uw afbeeldingen maken. Deze omvatten het vervagen of zoomen van de achtergrond, het vervagen of verschuiven van de tekst en het wijzigen van de achtergrondkleur.

De HTML voor de afbeeldingen maken

Begin met het maken van een index.html bestand in een lege map op uw computer en open het bestand vervolgens met een teksteditor. Maak in het bestand het HTML-skelet en voeg de volgende markeringen toe aan de openings- en sluitbody-tags:

<divklas="rooster">
<divklas="afbeelding-wrapper">
<imgklas="vervagen"src=" https://picsum.photos/500?random=1"alt="">





instagram viewer

<divklas="inhoud vervagen">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta advertentie
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklas="afbeelding-wrapper">
<imgklas="zoom vervagen"src=" https://picsum.photos/500?random=2"alt="">
<divklas="inhoud vervagen">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta advertentie
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklas="afbeelding-wrapper">
<imgklas="vervagen"src=" https://picsum.photos/500?random=3"alt="">
<divklas="inhoud dia-links">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta advertentie
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklas="afbeelding-wrapper">
<imgklas="grijs"src=" https://picsum.photos/500?random=3"alt="">
<divklas="inhoud dia-links">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta advertentie
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

Dit is een rastercontainer met vier afbeeldingswikkels. De div-elementen met de afbeelding-wrapper class dienen als omhulsel voor de afbeelding en de bijbehorende tekst. Aan de afbeelding en inhoud van elke sectie is een unieke reeks klassen toegevoegd.

In het stijlblad zul je richt u op deze elementen op hun klassennaam en pas de verschillende styling- en animatie-effecten toe. De tekst wordt niet standaard weergegeven; je laat het alleen zien als je met je muis over de afbeeldingsverpakking gaat en de afbeelding ondergaat verschillende effecten tijdens het proces.

Basis-CSS toevoegen

Nu je de HTML hebt gemaakt, is het tijd om het op te maken met CSS. Maak een stijl.css bestand en link naar dit stijlblad vanuit uw HTML-bestand, in de sectie:

<koppelingrel="stijlblad"href="stijl.css">

Binnen jouw stijl.css bestand, het eerste dat u hoeft te doen, is de marge op de body op nul zetten en een ondermarge instellen:

lichaam {
marge: 0;
marge-bodem: 20rem;
}

Vervolgens moet je de buitenste container veranderen in een CSS-raster dat u kunt gebruiken om elementen in twee dimensies op te maken. De volgende code maakt een raster met zoveel kolommen of rijen als er passen. De minimale grootte van elke kolom is 300px en de maximale grootte is 1 fractie van de container:

.rooster {
weergave: rooster;
raster-sjabloon-kolommen: herhalen(automatische aanpassing, minimaal(300px, 1fr));
}

Aangezien u de tekst ten opzichte van de container wilt positioneren, moet u de positie ten opzichte van de afbeeldingsverpakking instellen:

.image-wrapper {
positie: familielid;
overloop: verborgen;
}

De volgende stap is het stylen van de afbeelding. Geef de afbeelding weer als een blokelement, laat het de breedte van de hele container beslaan en plaats het passend in het midden van de container:

.image-wrapper > img {
weergave: blok;
breedte: 100%;
beeldverhouding: 1 / 1;
object-fit: omslag;
object-positie: centrum;
}

Wat betreft de tekst, positioneer deze centraal en geef een transparante, lichtgrijze achtergrondkleur:

.image-wrapper > .inhoud {
positie: absoluut;
inzet: 0;
lettertypegrootte: 2rem;
opvulling: 1rem;
achtergrond: RGBA(255, 255, 255, .4);
weergave: buigen;
uitlijnen-items: centrum;
rechtvaardigen-inhoud: centrum;
}

Sla het CSS-bestand op en open het index.html in uw browser. U zou een pagina moeten vinden die lijkt op die in de onderstaande afbeelding.

De overgang instellen op de afbeeldingen en teksten

Nu je de basisstijlen op de afbeeldingen hebt toegepast, is de volgende stap om er wat animatie aan toe te voegen. Begin met het toevoegen van een overgang aan beide afbeeldingen en de bijbehorende tekst:

.image-wrapper > img,
.image-wrapper > .inhoud {
overgang: 200Mevrgemak-in-uit;
}

Dit betekent dat alle overgangseffecten (d.w.z. fade-in, zoom en vervaging) 200 milliseconden duren en dezelfde timingcurve hebben.

Fade-in en Blur-animatie

De eerste animatiestijl vervaagt in de tekst. Wanneer u de muisaanwijzer op een bepaalde afbeeldingsverpakking plaatst, wordt de inhoud met de vervagen class zal dit effect (animatie met infaden en uitfaden) erop worden toegepast. U bereikt dit door de dekking op nul te zetten en deze te wijzigen in één wanneer een muis op een bepaalde afbeeldingsverpakking zweeft:

.image-wrapper > .inhoud.vervagen {
ondoorzichtigheid: 0;
}
.image-wrapper:zweven > .inhoud.vervagen {
ondoorzichtigheid: 1;
}

Als u het bestand opslaat en uw browser controleert, ziet u de fade-in-animatie van kracht. Maar je merkt misschien ook dat de tekst een beetje moeilijk te lezen is (als de afbeelding grimmig is en veel contrast heeft). Bedenk dat alle afbeeldingen ook een klassenaam hebben vervagen. Dit is om de afbeeldingen te vervagen om het broodnodige contrast tussen de afbeeldingen en de tekst toe te voegen:

afbeelding-wrapper:zweven > img.vervagen {
filter: vervagen(5px)
}

Als u nu met de muis over de afbeelding beweegt, kunt u zien dat deze gewoon vervaagt. U kunt de pixelwaarde verhogen om de vervaging meer uitgesproken te maken op de afbeeldingen, waardoor er meer contrast tussen de afbeelding en de tekst wordt toegevoegd.

Andere effecten toevoegen

De andere effecten zijn het verschuiven van de tekst van links, het zoomen van de afbeelding en het toevoegen van grijstinten aan de afbeelding. Hier is de code voor het bereiken van alle drie de effecten:

.image-wrapper > .inhoud.slide-links {
transformeren: vertalenX(100%)
}
.image-wrapper:zweven > .inhoud.slide-links {
transformeren: vertalenX(0%)
}
.image-wrapper:zweven > img.grijs {
filter: grijstinten(1)
}
.image-wrapper:zweven > img.vervagen {
filter: vervagen(5px)
}
.image-wrapper:zweven > img.zoom {
transformeren: schaal(1.1)
}

Sla het bestand op, ga naar uw browser en plaats de muisaanwijzer op elke afbeelding. Je zou de verschillende effecten in actie moeten zien.

Om de inschuifeffecten te voltooien, kunt u nog drie afbeeldingswikkels maken, elk met een afbeelding en tekst. Elk stuk tekst zou de klassenaam hebben omhoog schuiven, naar beneden glijden, of licht-rechts. Dan zou je de juiste waarde doorgeven pixel, em of rem, binnen in de transformeren() functie om alle drie de effecten te creëren.

CSS-raster en Flexbox

CSS Grid en Flexbox zijn twee functies waarmee u fantastische lay-outs voor uw website kunt maken. U kunt met gemak vrijwel elke gewenste lay-out maken en de rijen en kolommen naar uw smaak aanpassen. De kolommen zullen ook standaard responsief zijn. Als u leert wanneer u de ene boven de andere moet gebruiken, kunt u een CSS-ontwikkelaar van één procent worden.