Des blocs extensibles au survol en css

Comment agrandir ou étirer des divs au survol ?

Voici un exemple html/css de blocs extensibles au survol. Un voile d’opacité est ajouté, il se retirz également au survol. Le principe est assez simple : on crée une div d’une certaine largeur, on la décale au survol grâce à la propriété transform:translate, et on la ramène à sa position initiale lorsque le curseur quitte la zone. Le tout en css uniquement.

See the Pen
Expandable cards or div with css
by yuyazz (@yuyazz)
on CodePen.