Code

3 Coole CSS3-effecten voor afbeelding zweven

Op het moderne web zijn er talloze technieken die kunnen worden gebruikt om interessante interacties te creëren, maar de eenvoudigste en meest elegante is meestal CSS, en met name de toevoegingen die met CSS3 werden geleverd.

Vroeger moesten we voor dit soort effecten op JavaScript vertrouwen, maar dankzij de steeds groter wordende ondersteuning voor CSS3 via verschillende browsers, is het nu mogelijk om dergelijke effecten helemaal zonder scripting in te stellen. Er zijn helaas nog steeds browsers (IE9 en lager) die CSS3 niet ondersteunen, dus je hebt een terugval nodig voor oudere browsers of om het effect te behandelen als een progressieve verbetering.

Vandaag gaan we bekijken hoe we koele, maar nette hover-effecten kunnen toepassen om bijschriften van afbeeldingen te tonen en te verbergen.

Als u de code wilt volgen, kunt u dit doen download de bestanden hier.

Demo 1

De eerste demo is onze eenvoudigste: het beeld zal naar rechts vliegen om het bijschrift te onthullen.

De opmaak

Voor de html van onze tweede demo gebruiken we een vergelijkbare opmaak voor onze eerste demo. Maar deze keer gebruiken we demo-2 als de klasse en voegen we de nulklasse toe : 

  • This is a cool title!
    Lorem ipsum dolor sit amet.

De CSS

Onze CSS zal bijna hetzelfde zijn als de eerste demo, behalve dat we deze keer onze afbeelding naar beneden verplaatsen door de eigenschap onderaan in te stellen op -96px. We zullen ook de overgang van CSS3 gebruiken om een ​​soepel effect te creëren: 

.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}

Demo 3

Voor onze laatste demo maken we een flipping card-effect. Dit betekent dat wanneer u met uw muis over de afbeelding beweegt, deze rond de as zal draaien om de beschrijving te onthullen.