Snippets : Focus

Publié le 11 novembre 2018 dans la Catégorie Featured, Snippets

L’un des astuces les plus sympas en CSS, c’est de pouvoir ajouter du contenu additionnel avec le survol de la souris. En ajoutant un lien à un élément (une photo par exemple), et en utilisant la pseudo-classe hover , on obtient des résultats sympas.

Voyons ce que ça donne en HTML et CSS :

1) En HTML, mon objectif est d’afficher deux photos qui feront apparaître chacune du style mais aussi du texte supplémentaire.

Pour cela, je décide que chaque photo sera un item.

Voici le code pour l’un des items :

<div class="col-md-6">
                  <a href="#">
                      <div class="item_card" style="background-image: url(../../images/rome-focus-1.jpg);">
                          <div class="item_text">
                              <h4>TITRE</h4>
                              <ul class="list-inline">
                                  <li class="list-inline-item">. Pro </li>
                                  <li class="list-inline-item">. Sérieux </li>
                                  <li class="list-inline-item">. Distingué</li>
                              </ul>
                          </div>
                      </div>
                  </a>
              </div>

Comme on le voit, j’ai mis une ancre a pour le lien. Cela déclenchera le style additionnel au survol de la souris. Pour l’image de fond, je l’ai définie ici en HTML, mais il est préférable de la mettre dans le fichier CSS. Et j’ai ajouté une liste, dont le style sera précisé plus tard.

2) Pour le CSS,  je détermine l’élément qui sera mis en valeur. Dans mon exemple, j’ai décidé que le div aura pour classe item-card, et je définis le style ainsi :

.item_card {
padding: 50px 15px;
text-align: center;
display: table;
width: 100%;
height: 400px;
text-decoration: none;
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid #fff;
}

3) Ensuite, je souhaite que le survol de la souris affiche du texte par-dessus l’item. Je définis donc le style du texte :

.item_card .item_text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    position: relative;
    z-index: 10;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}
.item_card .item_text h4 {
    font-size: 36px;
    color: #fff;
    font-weight: bold;
}

4) Quatrième étape : je détermine le style qui sera appliqué avec la pseudo-classe before et la pseudo-classe after :

.item_card:before {
    background-color: #000;
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 0;
}
.item_card:after {
    background-color: transparent;
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 1;
    z-index: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
    border: 10px solid #fff729;
    opacity: 0;
}

5) Il est maintenant temps de définir le style du survol lui-même :

.item_card:hover:after,
.item_card:hover .item_text {
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity: 0.3s;
    opacity: 1;
}
.item_card:hover:before {
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0.5;
}

6) Enfin, j’ai décidé d’ajouter du texte sous le titre. Lui aussi n’apparaît qu’au moment du survol.
J’ai décidé d’utiliser la fonction liste :

 
.item_card .item_text ul li {
    color: #fff;
    font-size: 15px;
}
.items a {
    text-decoration: none;
}
.item_card .item_text ul {
    margin-bottom: 0px;
}

Voir le résultat final :
https://www.sebastienmerour.com/portfolio/snippets/focus/

Lire la suite