Effet de survol d'icône

2063 ledoc

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

13 January 2026

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

19 October 2024

Code de la barre de navigation HTML CSS

2 June 2025

Un code par abfomap

HTML

CSS

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
:root {
   --bg: #222;
   --clr: #fff;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: var(--bg);
}
ul {
   position: relative;
   display: flex;
   gap: 50px;
}
ul li {
   position: relative;
   list-style: none;
   width: 80px;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: 0.5s;
}
ul li::before {
   content: &singleQuote;&singleQuote;;
   position: absolute;
   inset: 30px;
   box-shadow: 0 0 0 10px var(--clr),
               0 0 0 20px var(--bg),
               0 0 0 22px var(--clr);
   transition: 0.5s;
}
ul li:hover::before {
   inset: 15px;
}
ul li::after {
   content: &singleQuote;&singleQuote;;
   position: absolute;
   inset: 0;
   background: var(--bg);
   transform: rotate(45deg);
   transition: 0.5s;
}
ul li:hover::after {
   inset: 0px;
   transform: rotate(0deg);
}
ul li a {
   position: relative;
   text-decoration: none;
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
}
ul li a i {
   font-size: 2em;
   transition: 0.5s;
   color: var(--clr);
   opacity: 1;
}
ul li:hover a i {
   color: var(--clr);
   transform: translateY(-40%);
}
ul li a span {
   position: absolute;
   font-family: sans-serif;
   color: var(--clr);
   opacity: 0;
   transition: 0.5s;
   transform: scale(0) translateY(200%);
}
ul li:hover a span {
   opacity: 1;
   transform: scale(1) translateY(100%);
}
ul li:hover a i,
ul li a span {
   filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}

Recommandé

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

Code de la barre de navigation HTML CSS

Un code par abfomap

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS