Animations au survol - Images avec InContent Effects

→ Des images avec InContent Effects

Ces propositions ci-dessous sont de Bruno Rodrigues, malheureusement, je ne trouve plus 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 (onglet 0) : Style commun est obligatoire. Ensuite, ajouter au même endroit les codes de style correspondant aux effets souhaités (onglet 1 : effets *1 à *4, onglet 2 : effets *5 à *8, onglet 3 : effets *9 à *12) en adaptant à l'aide des quelques commentaires. Il est possible d'encadrer ce style avec les balises [style type="text/css"]...[/style] et de le placer au début du code source de la boîte, de la page... Ou bien comme c'est le cas ici de le placer dans un fichier de style additionnel, nommé ici animsurvol_in_content_effects.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :


    <link charset="utf-8" href="skin/css/animsurvol_in_content_effects.css" rel="stylesheet" />

Et, dans tous les cas, dans le code source de la page ou de la boîte, là où vous souhaitez placer les images, insérez le code correspondant (voir onglet 4 ou onglet 5 pour le code simplifié) en adaptant les contenus, bien sûr.

0 1 2 3 4 5

Style commun


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

.pict-3d {
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	perspective: 500px;
	-webkit-transform-style: preserve-3d;
	-moz-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;
	opacity: 0;
}

.pict-image {
	-webkit-transform: scale(1.1);
	-moz-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);
	transform: scale(1); /*échelle 1 au survol : effet de recul*/
}

.pict-title { /*attributs du titre*/
	font: normal 25px 'verdana', sans-serif; /*police : gras taille nom*/
	margin:25px auto 10px; /*marges extérieures*/
	color:#FFFFFF; /*couleur*/
	background:transparent; /*fond*/
}

.pict-text { /*attributs du texte*/
	font: normal 14px 'verdana', sans-serif; /*police : gras taille nom*/
	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;
	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*/
	opacity: 1;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-moz-touch-callout: none;
	touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-moz-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}

Effets *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;
}

Effets *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);
	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);
	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);
	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);
	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);
	transform: rotateX(180deg);
	top: 0;
	left: 0;
}

.pict:hover .open-up {
	-webkit-transform: rotateX(0);
	-moz-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);
	transform: rotateX(-180deg);
	top: 0;
	left: 0;
}

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

Effets *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);
	transform: rotateY(180deg);
	left: 0;
	top: 0;
}

.pict:hover .open-left {
	-webkit-transform: rotateY(0deg);
	-moz-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);
	transform: rotateY(-180deg);
	left: 0;
	top: 0;
}

.pict:hover .open-right {
	-webkit-transform: rotateY(0deg);
	-moz-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);
	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);
	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);
	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);
	transform: rotateY(0) rotateX(0);
}

Code du corps de la page, de la boîte


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

<!--Effect : Bottom to Top -->
<div class="pict pict-3d"><img alt="pict01" class="pict-image" src="images/tutoriels/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><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="font" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption bottom-to-top -->
</div><!-- fin pict pict-3d -->

<!--Effect : Top to Bottom -->
<div class="pict pict-3d"><img alt="pict02" class="pict-image" src="images/tutoriels/images/pict02.jpg" />
<div class="pict-caption top-to-bottom">
<h1 class="pict-title">Top to Bottom *2</h1><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="archery" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption top-to-bottom -->
</div><!-- fin pict pict-3d -->

<!--Effect : Left to Right -->
<div class="pict pict-3d"><img alt="pict03" class="pict-image" src="images/tutoriels/images/pict03.jpg" />
<div class="pict-caption left-to-right">
<h1 class="pict-title">Left to Right *3</h1><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="thread-and-needle" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption left-to-right -->
</div><!-- fin pict pict-3d -->

<!--Effect : Right to Left -->
<div class="pict pict-3d"><img alt="pict04" class="pict-image" src="images/tutoriels/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><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="drawing-pad" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption right-to-left -->
</div><!-- fin pict pict-3d -->

<!--Effect : Rotate In -->
<div class="pict pict-3d"><img alt="pict05" class="pict-image" src="images/tutoriels/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><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="guitar" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption rotate-in -->
</div><!-- fin pict pict-3d -->

<!--Effect : Rotate Out -->
<div class="pict pict-3d"><img alt="pict06" class="pict-image" src="images/tutoriels/images/pict06.jpg" />
<div class="pict-caption rotate-out">
<h1 class="pict-title">Rotate Out *6</h1><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="icon" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption rotate-out -->
</div><!-- fin pict pict-3d -->

<!--Effect : Open Up -->
<div class="pict pict-3d"><img alt="pict07" class="pict-image" src="images/tutoriels/images/pict07.jpg" />
<div class="pict-caption open-up">
<h1 class="pict-title">Open Up *7</h1><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="paint" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption open-up -->
</div><!-- fin pict pict-3d -->

<!--Effect : Open Down -->
<div class="pict pict-3d"><img alt="pict08" class="pict-image" src="images/tutoriels/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><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="bike" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption open-down -->
</div><!-- fin pict pict-3d -->

<!--Effect : Open Left -->
<div class="pict pict-3d"><img alt="pict09" class="pict-image" src="images/tutoriels/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><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="note" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption open-left -->
</div><!-- fin pict pict-3d -->

<!--Effect : Open Right -->
<div class="pict pict-3d"><img alt="pict10" class="pict-image" src="images/tutoriels/images/pict10.jpg" />
<div class="pict-caption open-right">
<h1 class="pict-title">Open Right *10</h1><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="sound" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption open-right -->
</div><!-- fin pict pict-3d -->

<!--Effect : Come Left -->
<div class="pict pict-3d"><img alt="pict11" class="pict-image" src="images/tutoriels/images/pict11.jpg" />
<div class="pict-caption come-left">
<h1 class="pict-title">Come Left *11</h1><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="weave" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption come-left -->
</div><!-- fin pict pict-3d -->

<!--Effect : Come Right -->
<div class="pict pict-3d"><img alt="pict12" class="pict-image" src="images/tutoriels/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><!-- titre -->
<a href="https://openclipart.org/" target="_blank"><img alt="write" src="images/tutoriels/images/vignettes/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><!-- fin pict-caption come-right -->
</div><!-- fin pict pict-3d -->

</div><!--Fin text-align:center-->

Code simplifié


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

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

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

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

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

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

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

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

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

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

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

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

Dans le code du corps de la page ou de la boîte (onglet 4) ci-dessus, seules les lignes du contenu des balises [div class="pict pict-3d"]...[/div][!-- fin pict pict-3d --] sont obligatoires. Les balises [div style="margin-top:30px;text-align:center;"]...[/div] ne servent qu'à centrer les images de ce tutoriel. Mes images, ici, font toutes 300px par 225px et sont dans un dossier tutoriels/images placé dans le dossier images à la racine d'adHoc. Il y a également des vignettes (50px de côté) qui sont placées dans le dossier tutoriels/images/vignettes. Il faut évidemment adapter les sources à votre configuration. J'ai placé des liens en divers endroits pour en montrer le principe.

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

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

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

Index |Info | Imprimer | Permalien

Les 10 derniers articles

adHoc

Module Formulaire

adHoc

Module Message

Carousels

Slideshow de textes (quote slideshow)

adHoc

Module Derniers

adHoc

Module Hasard

adHoc

Module Tri Index

adHoc

Module de Nouvelles-Blog

adHoc

Module de Téléchargements

adHoc

Module de Liens

adHoc

Fork et Extraction de boîte

Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels