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.
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;">
<!--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="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>
<!--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="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>
<!--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="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>
<!--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="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>
<!--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="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>
<!--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="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><!--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.
Catégorie : - Changements au survol
Page lue 132369 fois
