Vous \u00eates nombreux \u00e0 vouloir r\u00e9aliser un effet de survol d’image sur vos portfolios. Voici une m\u00e9thode g\u00e9n\u00e9rique en CSS3, avec un fondu, que vous pourrez adapter si besoin.<\/p>\n
Placer dans body et plus particuli\u00e8rement dans un conteneur d\u00e9di\u00e9, une section avec une classe \u00ab\u00a0projets\u00a0\u00bb par exemple, le code suivant :<\/p>\n
<article class=\"vignette\">\n <a href=\"#\">\n <div class=\"photo\"><img src=\"chats\/chat8.jpg\" alt=\"img\"><\/div>\n <div class=\"infos\">\n <h4>Heading here<\/h4>\n <p>Description goes here<\/p>\n <\/div>\n <\/a>\n<\/article><\/code><\/pre>\nBien entendu, il faut adapter ce code, avec votre propre contenu, image, textes, et lien. Attention que le texte du paragraphe ne soit pas trop long, sous peine de d\u00e9passer.<\/p>\n
Le code CSS<\/h4>\n
Et placer dans le fichier CSS, le code suivant.<\/p>\n
.vignette {\n position: relative;\n width: 250px;\n height: 250px;\n }\n\n \/* ------- MASQUER LE TEXTE -------- *\/\n \n.vignette .infos {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n text-align: center;\n \n \/* Couleur du fond de texte *\/\n background-color: #1a4a72;\n background-color: rgba(26, 74, 114, 0.6);\n \n \/* Masquer le bloc de texte en le rendant transparent - opacit\u00e9 nulle *\/\n opacity: 0;\n \n \/* Animation de l'opacit\u00e9 au survol *\/\n \/* Dur\u00e9e r\u00e9gl\u00e9e \u00e0 0,8 secondes - \u00e0 adapter *\/\n -webkit-transition: all 0.8s ease-in-out;\n -moz-transition: all 0.8s ease-in-out;\n transition: all 0.8s ease-in-out;\n}\n \n \/* ------- AFFICHER LE TEXTE AU SURVOL -------- *\/\n \n.vignette a:hover .infos {\n \/* Afficher le bloc de texte en le rendant opaque - opacit\u00e9 maximale *\/\n opacity: 1;\n}\n \n \/* ------- MISE EN FORME DU TEXTE -------- *\/\n \n.infos h4 {\n \/* couleur et r\u00e9glages typographique du titre *\/\n color: #fff;\n font-size: 22px;\n text-transform: uppercase;\n letter-spacing: 2px;\n \n \/* positionnement du titre *\/\n margin: 0 30px;\n padding: 55px 0 0 0;\n height: 110px;\n \n \/* On peut rajouter une ombre port\u00e9e *\/\n \/*text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);*\/\n}\n \n.infos p {\n \/* couleur et r\u00e9glages typographique du texte *\/\n color: #bbb;\n font-size: 12px;\n font-style: italic;\n \n \/* positionnement du texte *\/\n padding: 10px 5px;\n margin: 0 30px;\n \n \/* filet au dessus du texte *\/\n border-top: 1px solid rgba(255, 255, 255, 0.5);\n}<\/code><\/pre>\nL\u00e0 aussi, il faut adapter la dimension de l’image dans la classe .vignette. Vous pouvez aussi modifier la couleur (background-color, les deux lignes correspondent \u00e0 une couleur opaque et la m\u00eame avec une transparence, une seule des deux lignes peut \u00eatre conserv\u00e9e), la dur\u00e9e de l’animation (0.8s) et bien s\u00fbr les r\u00e9glages du texte (h4 et p).<\/p>\n
Par exemple, si vous voulez juste centrer un titre verticalement, ne pas utiliser de paragraphe, et dans la classe .infos juste \u00e9crire pour le positionnement :<\/p>\n
display: flex;\nalign-items: center;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Vous \u00eates nombreux \u00e0 vouloir r\u00e9aliser un effet de survol d’image sur vos portfolios. Voici une m\u00e9thode g\u00e9n\u00e9rique en CSS3, avec un fondu, que vous pourrez adapter si besoin. Le code HTML Placer dans body et plus particuli\u00e8rement dans un conteneur d\u00e9di\u00e9, une section avec une classe \u00ab\u00a0projets\u00a0\u00bb par exemple, le code suivant : <article … Continuer la lecture de R\u00e9aliser un effet de survol d’image pour vos portfolios<\/span>