En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
Vous êtes ici :   Accueil » Images avec inContent Effects
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

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, 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
Catégorie : Astuces - Changements au survol
Page lue 3168 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 48 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 :
16 Abonnés