Ayant eu le besoin pour un client de faire un effet « cible » sur les produits de sa boutique en ligne, j’ai décidé de tester cela en « full » CSS (sans images) et le résultat n’est pas si mal. Vous l’aurez compris, ce petit article sera consacré à mettre en place un effet « cible » sur un bloc lors du survol de celui-ci, comme par exemple sur une liste de produits.

Tout d’abord définissons la structure du bloc en HTML.

<ul class="grid">
    <li>
        <div class="item-area">
            <h3>Titre 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et.</p>
        </div>
        <span class="cursor-horiz"></span>
        <span class="cursor-vert"></span>
    </li>
</ul>

Ici nous avons une liste simple contenant une div et deux éléments span positionnés juste après celle-ci (nous verrons plus loin à quoi ils servent).

Passons maintenant à la décoration de notre li et notre div.

.grid li {
    width: 350px;
    float: left;
    margin: 10px;
    padding: 0;
    text-align: center;
    position: relative;
}

.grid li .item-area {
    padding: 20px;
    background-color: #535353;
    position: relative;
    color: #F8F28B;
}

.grid li:hover .item-area {
    background-color: #2a2a2a;
    border: 1px solid #F8F28B;
}

Nous avons ici définit une largeur fixe pour nos élément en liste, ainsi qu’une marge et un float. (la base pour placé les éléments les uns à côté des autres). Pour notre bloc à l’intérieur nous avons définit quelques éléments pour bien le visualiser, ainsi qu’une bordure et une autre couleur de fond lors du survol sur l’élément de la liste.

Si on s’arrête là, on obtient au survol une bordure entourant notre bloc. L’astuce sera de masquer une partie de cette bordure sur les quatres côtés du bloc, c’est là qu’intervienne les deux éléments span vus précédemment. L’un va masquer les côtés droit et gauche, l’autre les côtés haut et bas de la bordure du bloc. Pour réaliser cela, nous allons ajouter à la feuille de styles les lignes suivantes.

.grid li:hover .cursor-horiz::before {content: ""; left: 0; top: 15%;position: absolute;width: 1px;height: 70%;background-color: #2a2a2a;}
.grid li:hover .cursor-horiz::after {content: ""; right: 0; top: 15%;position: absolute;width: 1px;height: 70%;background-color: #2a2a2a;}
.grid li:hover .cursor-vert::before {content: ""; left: 15%; top: 0;position: absolute;width: 70%;height: 1px;background-color: #2a2a2a;}
.grid li:hover .cursor-vert::after {content: ""; left: 15%; bottom: 0;position: absolute;width: 70%;height: 1px;background-color: #2a2a2a;}

Ici les sélecteurs before et after vont permettre de masquer chaque côté en définissant la position en absolue et une couleur de fond égale à celle du fond du bloc. On applique également une largeur ou une hauteur (suivant si on masque verticalement ou horizontalement) de la taille de la bordure (soit ici de 1px) et de l’autre la taille du masque (soit ici 70% de la largeur ou de la hauteur du bloc). On place ensuite ce masque à la position voulu grâce aux propriétés left, right, top et bottom et le tour est joué.

Vous savez maintenant créer un effet « cible » sur un bloc tout ça uniquement grâce au CSS. Vous pouvez ainsi personnaliser la couleur de la cible, la taille de la cible et même ajouté quelques effets (voir dans la démo).

Démonstration