En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.

Quel est ce menu ?

Bienvenue !

Ceci est un Menu à Grande Contenance.

Testez ses différents items pour voir ses possibilités.

Rendez vous sur cet article tutoriel pour le mettre en oeuvre.

Et les navigateurs ?

Les navigateurs testés l'affichent correctement !
Camera et Skins

Skins série "Transparences" présentées avec Camera !

Les skins présentées ici sont à la version 5.03.xx et toutes téléchargeables.

Cliquez sur l'image correspondante pour vous rendre sur la page de son téléchargement.

Vous pouvez les tester sur Demo-skins.

Camera : slider développé par Manuel Masia

Ce slider de Manuel Masia peut être utilisé très facilement dans GuppY ou un autre CMS. Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut intégrer des vidéos !

Camera a été intégré un temps dans GuppY, il est très facile de le remettre en place. Il en complètera utilement les autres outils.

Sur ce site quelques tutoriels pour mieux maitriser Camera.

Notez également que :

¤ 2 carousels de Brian Osborne sont disponibles lisez les tutoriels : WaterwheelCarousel et FeatureCarousel.
¤ 2 "slideshows" également, avec ou sans JQuery : lisez les tutoriels : Accordion(CSS) et Circle Nav(JQuery).
IFrames responsives
À quoi servent ces iFrames ?

C'est une solution élégante et assez simple pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.
Lisez le tutoriel.

Des bandeaux avec des cellules (tuiles) indépendantes

Lisez les tutoriels ci-dessous pour adapter des cellules qui peuvent agrémenter votre éditorial par exemple...
- Un bandeau simple
- Une variante simple
- Avec Hover Effects Ideas
AudioPlayers

Trois AudioPlayers

Un Audio-player avec playlist, à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.
Lisez le tutoriel

Un Audio-player simple avec playlist en pur html et peut donc être intégré directement dans GuppY.
Lisez le tutoriel

Un Audio-player (JPlayer avec playlist) avec jQuery peut être intégré dans GuppY. Il peut aussi lire des vidéos.
Lisez le tutoriel
Effets au survol
Quelques exemples d'effets obtenus au survol

... et bien d'autres encore, suivez ces liens...
CSS
Astuces en pur CSS

Vous êtes ici : Accueil » Images avec inContent Effects

Imprimer la page...
Imprimer la section...

Images avec inContent Effects

Des images avec InContent Effects

Ces propositions ci-dessous sont de Bruno Rodrigues, malheureusement, je ne trouve pas de liens valides vers son (ou ses) site(s). Mais on peut trouver le dossier ici : https://itbruno.github.io/InContent/

info licence : Distribué sous licence MIT.

Je me suis contenté de jouer avec et de modifier à la marge les propositions en permettant, notamment des fonds différents sur chaque image.

pict01

Bottom to Top *1

font

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict02

Top to Bottom *2

archery

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict03

Left to Right *3

thread-and-needle

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict04

Right to Left *4

drawing-pad

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict05

Rotate In *5

guitar

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict06

Rotate Out *6

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict07

Open Up *7

paint

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict08

Open Down *8

bike

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict09

Open Left *9

note

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict10

Open Right *10

sound

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict11

Come Left *11

weave

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict12

Come Right *12

write

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant à chaque effet en adaptant les contenus, bien sûr.

Style commun

.pict {
    max-width: 300px; /*largeur de l'image*/
    max-height: 225px; /*hauteur de l'image*/
    position: relative;
    overflow: hidden;
    margin: 5px; /*marges extérieures*/
    display: inline-block;
    -webkit-animation: anima 2s;
    -moz-animation: anima 2s;
    -o-animation: anima 2s;
    -ms-animation: anima 2s;
    animation: anima 2s; /*temps animation*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pict-3d {
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -o-perspective: 500;
    -ms-perspective: 500;
    perspective: 500;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.pict-caption { /*attributs du masque*/
    cursor: default;
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(44, 62, 80, 0.7);*/ /*couleur du fond : mis en commentaire pour individualiser les fonds*/
    padding: 10px; /*marges intérieures*/
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

.pict-image {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); /*échelle 1.1 à l'affichage*/
}

.pict:hover .pict-image {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); /*échelle 1 au survol : effet de recul*/
}

.pict-title { /*attributs du titre*/
    font-size: 25px; /*taille de la police*/
   font-weight:normal; /*ou bold...*/
    margin-top:25px; /*marge extérieure haute*/
    color:#FFFFFF; /*couleur*/
   background:transparent; /*fond*/
}

.pict-text { /*attributs du texte*/
    font-size: 14px; /*taille de la police*/
    margin-top:5px; /*marge extérieure haute*/
    color:#C0C0C0; /*couleur*/
    background:transparent; /*fond*/
}

.pict-title a, .pict-text a { /*attributs des liens titre et/ou texte*/
   color:#0000FF; /*couleur*/
   background:rgba(192,192,192,.8); /*couleur du fond*/
   padding:1px; /*marges intérieures*/
   border-radius:4px; /*arrondis*/
   text-decoration:none;
}

.pict-title a:hover, .pict-text a:hover { /*attributs des liens titre et/ou texte survolés*/
background:rgba(255,255,255,.8); /*couleur du fond*/
}

a, a:hover { background:transparent; }

.pict .pict-image,
.pict-caption,
.pict:hover .pict-caption,
.pict:hover img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease; /*temps transition*/
}

.pict:hover .bottom-to-top,
.pict:hover .top-to-bottom,
.pict:hover .left-to-right,
.pict:hover .right-to-left,
.pict:hover .rotate-in,
.pict:hover .rotate-out,
.pict:hover .open-up,
.pict:hover .open-down,
.pict:hover .open-left,
.pict:hover .open-right,
.pict:hover .come-left,
.pict:hover .come-right { /*supprimer éventuellement les effets non utilisés*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    -o-touch-callout: none;
    -ms-touch-callout: none;
    touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -o-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

InContent Effects 1 à 4

/* Effect : bottom-to-top *1 */
.pict-caption.bottom-to-top {
background: rgba(80, 63, 50, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.bottom-to-top {
top: 90%; /*faire varier la position du départ*/
left: 0;
}

.pict:hover .bottom-to-top {
top: 0;
left: 0;
}

/* Effect : top-to-bottom *2 */
.pict-caption.top-to-bottom {
background: rgba(85, 89, 90, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.top-to-bottom {
bottom: 90%; /*faire varier la position du départ*/
left: 0;
}

.pict:hover .top-to-bottom {
left: 0;
bottom: 0; /*faire varier la position au survol*/
}

/* Effect : left-to-right *3 */
.pict-caption.left-to-right {
background: rgba(144, 21, 16, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.left-to-right {
top: 0;
right: 90%; /*faire varier la position du départ*/
}

.pict:hover .left-to-right {
right: 0;
top: 0;
}

/* Effect : right-to-left *4 */
.pict-caption.right-to-left {
background: rgba(163, 115, 77, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.right-to-left {
top: 0;
left: 90%; /*faire varier la position du départ*/
}

.pict:hover .right-to-left {
left: 0;
top: 0;
}

InContent Effects 5 à 8

/* Effect : rotate-in *5 */
.pict-caption.rotate-in {
background: rgba(95, 85, 137, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.rotate-in {
    -webkit-transform: rotate(90deg) scale(0.1);
    -moz-transform: rotate(90deg) scale(0.1);
    -o-transform: rotate(90deg) scale(0.1);
    -ms-transform: rotate(90deg) scale(0.1);
    transform: rotate(90deg) scale(0.1);
    top: 0;
    left: 0;
}

.pict:hover .rotate-in {
    -webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
}

/* Effect : rotate-out *6 */
.pict-caption.rotate-out {
background: rgba(52, 52, 52, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.rotate-out {
    -webkit-transform: rotate(90deg) scale(3);
    -moz-transform: rotate(90deg) scale(3);
    -o-transform: rotate(90deg) scale(3);
    -ms-transform: rotate(90deg) scale(3);
    transform: rotate(90deg) scale(3);
    top: 0;
    left: 0;
}

.pict:hover .rotate-out {
    -webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
}

/* Effect : open-up *7 */
.pict-caption.open-up {
background: rgba(97, 98, 30, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.open-up {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
    top: 0;
    left: 0;
}

.pict:hover .open-up {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -o-transform: rotateX(0);
    -ms-transform: rotateX(0);
    transform: rotateX(0);
}

/* Effect : open-down *8 */
.pict-caption.open-down {
background: rgba(39, 51, 99, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.open-down {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    top: 0;
    left: 0;
}

.pict:hover .open-down {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -o-transform: rotateX(0);
    -ms-transform: rotateX(0);
    transform: rotateX(0);
}

InContent Effects 9 à 12

/* Effect : open-left *9 */
.pict-caption.open-left {
background: rgba(165, 91, 48, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.open-left {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    left: 0;
    top: 0;
}

.pict:hover .open-left {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/* Effect : open-right *10 */
.pict-caption.open-right {
background: rgba(100, 107, 88, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.open-right {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    left: 0;
    top: 0;
}

.pict:hover .open-right {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/* Effect : come-left *11 */
.pict-caption.come-left {
background: rgba(3, 38, 160, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.come-left {
    -webkit-transform: rotateY(90deg) rotateX(90deg);
    -moz-transform: rotateY(90deg) rotateX(90deg);
    -o-transform: rotateY(90deg) rotateX(90deg);
    -ms-transform: rotateY(90deg) rotateX(90deg);
    transform: rotateY(90deg) rotateX(90deg);
    left: 0;
    top: 0;
}

.pict:hover .come-left {
    -webkit-transform: rotateY(0) rotateX(0);
    -moz-transform: rotateY(0) rotateX(0);
    -o-transform: rotateY(0) rotateX(0);
    -ms-transform: rotateY(0) rotateX(0);
    transform: rotateY(0) rotateX(0);
}

/* Effect : come-right *12 */
.pict-caption.come-right {
background: rgba(98, 80, 32, 0.8); /*couleur du fond du masque : supprimer si nécessaire*/
}

.come-right {
    -webkit-transform: rotateY(90deg) rotateX(-90deg);
    -moz-transform: rotateY(90deg) rotateX(-90deg);
    -o-transform: rotateY(90deg) rotateX(-90deg);
    -ms-transform: rotateY(90deg) rotateX(-90deg);
    transform: rotateY(90deg) rotateX(-90deg);
    left: 0;
    top: 0;
}

.pict:hover .come-right {
    -webkit-transform: rotateY(0) rotateX(0);
    -moz-transform: rotateY(0) rotateX(0);
    -o-transform: rotateY(0) rotateX(0);
    -ms-transform: rotateY(0) rotateX(0);
    transform: rotateY(0) rotateX(0);
}

Codes du corps de l'article

<div style="margin-top:30px;text-align:center;">

<div class="pict pict-3d"><img alt="pict01" class="pict-image" src="img/images/pict01.jpg" />
           <div class="pict-caption bottom-to-top">
               <h1 class="pict-title"><a href="https://itbruno.github.io/InContent/" target="_blank">Bottom to Top *1</a></h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="font" src="img/images/vignt/font.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict02" class="pict-image" src="img/images/pict02.jpg" />
           <div class="pict-caption top-to-bottom">
               <h1 class="pict-title">Top to Bottom *2</h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="archery" src="img/images/vignt/archery.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict03" class="pict-image" src="img/images/pict03.jpg" />
           <div class="pict-caption left-to-right">
               <h1 class="pict-title">Left to Right *3</h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="thread-and-needle" src="img/images/vignt/thread-and-needle.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict04" class="pict-image" src="img/images/pict04.jpg" />
           <div class="pict-caption right-to-left">
               <h1 class="pict-title"><a href="https://itbruno.github.io/InContent/" target="_blank">Right-to-left *4</a></h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="drawing-pad" src="img/images/vignt/drawing-pad.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict05" class="pict-image" src="img/images/pict05.jpg" />
           <div class="pict-caption rotate-in">
               <h1 class="pict-title"><a href="https://itbruno.github.io/InContent/" target="_blank">Rotate In *5</a></h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="guitar" src="img/images/vignt/guitar.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict06" class="pict-image" src="img/images/pict06.jpg" />
           <div class="pict-caption rotate-out">
               <h1 class="pict-title">Rotate Out *6</h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="icon" src="img/images/vignt/icon.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict07" class="pict-image" src="img/images/pict07.jpg" />
           <div class="pict-caption open-up">
               <h1 class="pict-title">Open Up *7</h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="paint" src="img/images/vignt/paint.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict08" class="pict-image" src="img/images/pict08.jpg" />
           <div class="pict-caption open-down">
               <h1 class="pict-title"><a href="https://itbruno.github.io/InContent/" target="_blank">Open-down *8</a></h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="bike" src="img/images/vignt/bike.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict09" class="pict-image" src="img/images/pict09.jpg" />
           <div class="pict-caption open-left">
               <h1 class="pict-title"><a href="https://itbruno.github.io/InContent/" target="_blank">Open-left *9</a></h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="note" src="img/images/vignt/note.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict10" class="pict-image" src="img/images/pict10.jpg" />
           <div class="pict-caption open-right">
               <h1 class="pict-title">Open Right *10</h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="sound" src="img/images/vignt/sound.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict11" class="pict-image" src="img/images/pict11.jpg" />
           <div class="pict-caption come-left">
               <h1 class="pict-title">Come Left *11</h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="weave" src="img/images/vignt/weave.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict12" class="pict-image" src="img/images/pict12.jpg" />
           <div class="pict-caption come-right">
               <h1 class="pict-title"><a href="https://itbruno.github.io/InContent/" target="_blank">Come-right *12</a></h1>
               <a href="https://openclipart.org/" target="_blank"><img alt="write" src="img/images/vignt/write.png" /></a>
               <p class="pict-text">Imagettes issues de <a href="https://openclipart.org/" target="_blank">OpenClipArt</a></p>
               <p class="pict-text">Images de fond issues de <a href="https://pixabay.com/fr" target="_blank">Pixabay</a></p>
           </div>
       </div>

</div>

Code simplifié

<div class="pict pict-3d"><img alt="pict01" class="pict-image" src="img/images/pict01.jpg" />
           <div class="pict-caption bottom-to-top">
               <h1 class="pict-title">Bottom to Top *1</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict02" class="pict-image" src="img/images/pict02.jpg" />
           <div class="pict-caption top-to-bottom">
               <h1 class="pict-title">Top to Bottom *2</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict03" class="pict-image" src="img/images/pict03.jpg" />
           <div class="pict-caption left-to-right">
               <h1 class="pict-title">Left to Right *3</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict04" class="pict-image" src="img/images/pict04.jpg" />
           <div class="pict-caption right-to-left">
               <h1 class="pict-title">Right to Left *4</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict05" class="pict-image" src="img/images/pict05.jpg" />
           <div class="pict-caption rotate-in">
               <h1 class="pict-title">Rotate In *5</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict06" class="pict-image" src="img/images/pict06.jpg" />
           <div class="pict-caption rotate-out">
               <h1 class="pict-title">Rotate Out *6</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict07" class="pict-image" src="img/images/pict07.jpg" />
           <div class="pict-caption open-up">
               <h1 class="pict-title">Open Up *7</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict08" class="pict-image" src="img/images/pict08.jpg" />
           <div class="pict-caption open-down">
               <h1 class="pict-title">Open Down *8</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict09 class="pict-image" src="img/images/pict09.jpg" />
           <div class="pict-caption open-left">
               <h1 class="pict-title">Open Left *9</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict10" class="pict-image" src="img/images/pict10.jpg" />
           <div class="pict-caption open-right">
               <h1 class="pict-title">Open Right *10</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict11" class="pict-image" src="img/images/pict11.jpg" />
           <div class="pict-caption come-left">
               <h1 class="pict-title">Come Left *11</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

   
       <div class="pict pict-3d"><img alt="pict12" class="pict-image" src="img/images/pict12.jpg" />
           <div class="pict-caption come-right">
               <h1 class="pict-title">Come Right *12</h1>
               <p class="pict-text">Mon texte</p>
           </div>
       </div>

Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Les lignes surlignées en bleu ne servent qu'à centrer les images de ce tutoriel. Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Les parties surlignées en jaune servent à montrer comment placer des liens à différents endroits du code (dans le titre, dans le texte, sur des images...). Mes images (300*225px) sont dans un dossier images placé dans le dossier img à la racine de GuppY. Les imagettes (50*50px) sont dans un dossier vignt situé dans ce dossier images. Il faut évidemment adapter les sources à votre configuration.

Dans le code simplifié, je n'ai placé que l'essentiel. C'est juste pour montrer l'enchainement le plus simple.

ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.

Date de création : 06/10/2018 @ 14:15
Catégorie : Astuces - Changements au survol
Page lue 131464 fois