En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante 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

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante 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

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à 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 également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (GuppY 5.02.05 et +) moyennant quelques champs à compléter dans "Config Look". Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

 
Vous êtes ici :   Accueil » Images avec inContent Effects
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

Nouveau  Images avec inContent Effects

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

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 : http://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

icon

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
  • *1 à *4
  • *5 à *8
  • *9 à *12
  • Codes du corps de l'article
  • Code simplifié

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: -20px; /*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;">

    <!--Effect : Bottom to Top -->
        <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="http://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>
        
    <!--Effect : Top to Bottom -->
        <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>
    
    <!--Effect : Left to Right -->
        <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>
    
    <!--Effect : Right to Left -->
        <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="http://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>
    
    <!--Effect : Rotate In -->
        <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="http://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>
    
    <!--Effect : Rotate Out -->
        <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>
    
    <!--Effect : Open Up -->
        <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>
    
    <!--Effect : Open Down -->
        <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="http://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>
    
    <!--Effect : Open Left -->
        <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="http://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>
    
    <!--Effect : Open Right -->
        <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>
    
    <!--Effect : Come Left -->
        <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>
    
    <!--Effect : Come Right -->
        <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="http://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><!--Fin text-align:center-->

Code simplifié

    <!--Effect : Bottom to Top -->
        <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>
        
    <!--Effect : Top to Bottom -->
        <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>
    
    <!--Effect : Left to Right -->
        <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>
    
    <!--Effect : Right to Left -->
        <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>
    
    <!--Effect : Rotate In -->
        <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>
    
    <!--Effect : Rotate Out -->
        <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>
    
    <!--Effect : Open Up -->
        <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>
    
    <!--Effect : Open Down -->
        <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>
    
    <!--Effect : Open Left -->
        <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>
    
    <!--Effect : Open Right -->
        <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>
    
    <!--Effect : Come Left -->
        <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>
    
    <!--Effect : Come Right -->
        <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, smatphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclancher 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
Catégorie : Astuces - Changements au survol
Page lue 422 fois


Réactions à cet article


Réaction n°1 

par jac83 le 11/10/2018

Encore de beaux effets ,faciles à mettre en place dans une boîte libre grâce aux explications commentées  cool


Merci pour tes commentaires,

Cordialement,

Jean-Denis


Vous êtes ici :   Accueil » Images avec inContent Effects

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 41 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
15 Abonnés