{"id":139,"date":"2018-11-11T12:22:31","date_gmt":"2018-11-11T11:22:31","guid":{"rendered":"https:\/\/www.sebastienmerour.com\/?p=139"},"modified":"2018-11-11T12:34:59","modified_gmt":"2018-11-11T11:34:59","slug":"snippets-focus","status":"publish","type":"post","link":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/snippets-focus\/","title":{"rendered":"Snippets : Focus"},"content":{"rendered":"

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 \u00e0 un \u00e9l\u00e9ment (une photo par exemple), et en utilisant la pseudo-classe hover , on obtient des r\u00e9sultats sympas.<\/p>\n

Voyons ce que \u00e7a donne en HTML et CSS :<\/p>\n

1) En HTML, mon objectif est d’afficher deux photos qui feront appara\u00eetre chacune du style mais aussi du texte suppl\u00e9mentaire.<\/p>\n

Pour cela, je d\u00e9cide que chaque photo sera un item.<\/p>\n

Voici le code pour l’un des items :<\/p>\n

\r\n<div class="col-md-6">\r\n                  <a href="#">\r\n                      <div class="item_card" style="background-image: url(..\/..\/images\/rome-focus-1.jpg);">\r\n                          <div class="item_text">\r\n                              <h4>TITRE<\/h4>\r\n                              <ul class="list-inline">\r\n                                  <li class="list-inline-item">. Pro <\/li>\r\n                                  <li class="list-inline-item">. S\u00e9rieux <\/li>\r\n                                  <li class="list-inline-item">. Distingu\u00e9<\/li>\r\n                              <\/ul>\r\n                          <\/div>\r\n                      <\/div>\r\n                  <\/a>\r\n              <\/div>\r\n<\/pre>\n
Comme on le voit, j’ai mis une ancre a<\/strong> pour le lien. Cela d\u00e9clenchera le style additionnel au survol de la souris. Pour l’image de fond, je l’ai d\u00e9finie ici en HTML, mais il est pr\u00e9f\u00e9rable de la mettre dans le fichier CSS. Et j’ai ajout\u00e9 une liste, dont le style sera pr\u00e9cis\u00e9 plus tard.<\/p>\n
2) Pour le CSS,\u00a0 je d\u00e9termine l’\u00e9l\u00e9ment qui sera mis en valeur. Dans mon exemple, j’ai d\u00e9cid\u00e9 que le div aura pour classe item-card, et je d\u00e9finis le style ainsi :<\/p>\n
\r\n.item_card {\r\npadding: 50px 15px;\r\ntext-align: center;\r\ndisplay: table;\r\nwidth: 100%;\r\nheight: 400px;\r\ntext-decoration: none;\r\nposition: relative;\r\nbackground-position: center;\r\nbackground-size: cover;\r\nbackground-repeat: no-repeat;\r\nborder: 1px solid #fff;\r\n}\r\n<\/pre>\n
3) Ensuite, je souhaite que le survol de la souris affiche du texte par-dessus l’item. Je d\u00e9finis donc le style du texte :<\/p>\n
\r\n.item_card .item_text {\r\n    display: table-cell;\r\n    vertical-align: middle;\r\n    width: 100%;\r\n    position: relative;\r\n    z-index: 10;\r\n    opacity: 0;\r\n    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;\r\n    -moz-transition: -moz-transform 0.3s, opacity 0.2s;\r\n    transition: transform 0.3s, opacity 0.2s;\r\n}\r\n.item_card .item_text h4 {\r\n    font-size: 36px;\r\n    color: #fff;\r\n    font-weight: bold;\r\n}\r\n<\/pre>\n
4) Quatri\u00e8me \u00e9tape : je d\u00e9termine le style qui sera appliqu\u00e9 avec la pseudo-classe before et la pseudo-classe after :<\/p>\n
\r\n.item_card:before {\r\n    background-color: #000;\r\n    content: "";\r\n    position: absolute;\r\n    top: 0px;\r\n    width: 100%;\r\n    height: 100%;\r\n    left: 0;\r\n    opacity: 0;\r\n}\r\n.item_card:after {\r\n    background-color: transparent;\r\n    content: "";\r\n    position: absolute;\r\n    top: 0px;\r\n    width: 100%;\r\n    height: 100%;\r\n    left: 0;\r\n    opacity: 1;\r\n    z-index: 0;\r\n    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;\r\n    -moz-transition: -moz-transform 0.3s, opacity 0.2s;\r\n    transition: transform 0.3s, opacity 0.2s;\r\n    border: 10px solid #fff729;\r\n    opacity: 0;\r\n}\r\n<\/pre>\n
5) Il est maintenant temps de d\u00e9finir le style du survol lui-m\u00eame :<\/p>\n
\r\n.item_card:hover:after,\r\n.item_card:hover .item_text {\r\n    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;\r\n    -moz-transition: -moz-transform 0.3s, opacity 0.2s;\r\n    transition: transform 0.3s, opacity: 0.3s;\r\n    opacity: 1;\r\n}\r\n.item_card:hover:before {\r\n    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;\r\n    -moz-transition: -moz-transform 0.3s, opacity 0.2s;\r\n    transition: transform 0.3s, opacity 0.3s;\r\n    opacity: 0.5;\r\n}\r\n<\/pre>\n
6) Enfin, j’ai d\u00e9cid\u00e9 d’ajouter du texte sous le titre. Lui aussi n’appara\u00eet qu’au moment du survol.
\nJ’ai d\u00e9cid\u00e9 d’utiliser la fonction liste :<\/p>\n
 \r\n.item_card .item_text ul li {\r\n    color: #fff;\r\n    font-size: 15px;\r\n}\r\n.items a {\r\n    text-decoration: none;\r\n}\r\n.item_card .item_text ul {\r\n    margin-bottom: 0px;\r\n}\r\n<\/pre>\n
Voir le r\u00e9sultat final :
\nhttps:\/\/www.sebastienmerour.com\/portfolio\/snippets\/focus\/<\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"
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 \u00e0 un \u00e9l\u00e9ment (une photo par exemple), et en utilisant la pseudo-classe hover , on obtient des r\u00e9sultats sympas. Voyons ce que \u00e7a donne en HTML et CSS : 1) […]<\/p>\n","protected":false},"author":1,"featured_media":138,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,18],"tags":[20,19],"_links":{"self":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/139"}],"collection":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":9,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/139\/revisions\/152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/138"}],"wp:attachment":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}