Legende et zoom au survol d'image

Kaldorann Messages postés 1 Statut Membre -
tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention - 12 nov. 2012 à 18:47

Bonjours a tous ,
Voila cela fait plus que 3 heures que je bloque sur un problème.

Je souhaiterais combiner 2 effets en Css3.

Le premier disponible sur se lien :
https://www.mariouniversalis.fr/tutoSdZ/css3_animations/exemple5.html
et le second que j'ai reussi a faire :
https://err.freewebhostingarea.com/404.html
Ainsi j'aimerais que au survol de mon image la légende ( crée par Adrien Guéret (KorHosik) [ SDZ ] )
et que en plus un léger zoom s'applique sur l'image.

Pour ceux qui voudrait pas regarder mon code source sur la page :p voici le html et le css :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
 <head> 
  <title>Test page</title> 
  <meta charset="iso-8859-1" /> 
  <link rel="stylesheet" type="text/css" href="./design_css.css" /> 
 </head> 
 <body> 

<div id="cadre_center"> 
<div id="up_center"></div> 
<div id="mid_center"><br> 
 <ul> 
		<li>
		<a href="./plage.jpg" alt="plage">
			<img src="./plage-mini.jpg">
			<span>La page</span>
		</a>
		<li>
  <br>   
		<li>
		<a href="./plage.jpg" alt="plage">
			<img src="./plage-mini.jpg">
			<span>La page</span>
		</a>
		<li>
  <br>   
		<li>
		<a href="./plage.jpg" alt="plage">
			<img src="./plage-mini.jpg">
			<span>La page</span>
		</a>
		<li>
  <br> 
		<li>
		<a href="./plage.jpg" alt="plage">
			<img src="./plage-mini.jpg">
			<span>La page</span>
		</a>
		<li> 
  <br> 
		<li>
		<a href="./plage.jpg" alt="plage">
			<img src="./plage-mini.jpg">
			<span>La page</span>
		</a>
		<li>
  </a> 
  <br> 
		<li>
		<a href="./plage.jpg" alt="plage">
			<img src="./plage-mini.jpg">
			<span>La page</span>
		</a>
		<li>
  <br> 
		<li>
		<a href="./plage.jpg" alt="plage">
			<img src="./plage-mini.jpg">
			<span>La page</span>
		</a>
		<li>
  <br> 
 </ul>  
        <br>     
</div> 
<div id="bot_center"></div> 
</div> 
</div> 
     
</body> 
</html>

Et pour mon code Css :

#mid_center ul  
      { 
        list-style: none; 
        margin: 0 -25px; 
      } 
      #mid_center li 
      { 
      position: relative; 
      display: inline-block; 
      margin : 0 5px; 
      width: 85px; 
      height: 77px; 
      } 
     
      #mid_center img 
      { 
        position: absolute; 
        width: 165px; 
                      height: 132px; 
        border: 3px solid #000; 
         z-index: 0; 
         transition-property: width,height,margin,z-index; 
        transition-duration: 0.5s; 
        transition-timing-function: ease-out;  
      } 

     
      #mid_center ul img:hover, img:focus  
      { 
                       margin-left: -30px;margin-top: -30px; 
                       height: 200px; 
        width: 250px; 
        z-index: 100; 
      }

si quelqu'un pouvait me venir en aide car la je craque ><.

Merci :)

Afficher la suite

A voir également:

Legende et zoom au survol d'image
Légende image word - Guide
Zoom appel video - Guide
Reduire taille image - Guide
Image iso - Guide
Acronis true image gratuit - Télécharger - Sauvegarde

1 réponse

tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220

Salut,

En reprenant le code de base du premier lien associé au zoom, peut être que ceci devrait vous aidez :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
 <head> 
  <title>Test page</title> 
  <meta charset="iso-8859-1" /> 
<style>
ul
{
	list-style: none;
	width: 60%;
	margin: auto;
}

li
{
	width: 150px;
	height: 150px;
	text-align: center;
	font-weight: bold;
	display: inline-block;
	position: relative;
	border: 1px solid #000;
	margin: 10px;
	padding: 0px;
	overflow: hidden;
	border-radius: 10px;
	background-position: center;
/*Ajout de la transition*/	
/*Propriétés affectés*/
-webkit-transition-property: width, height;/*Chrome et Safari*/
-moz-transition-property: width, height;/*Gecko*/
-ms-transition-property: width, height;/*Microsoft*/
-o-transition-property: width, height;/*Opera*/
transition-property: width, height;/*Standart*/
 
/*Duré de la transition*/
-webkit-transition-duration: 1s;/*Chrome et Safari*/
-moz-transition-duration: 1s;/*Gecko*/
-ms-transition-duration: 1s;/*Microsoft*/
-o-transition-duration: 1s;/*Opera*/
transition-duration: 1s;/*Standart*/	
}

/*Petite image*/
#item1{background-image: url('http://mariouniversalis.no-ip.org/tutoSdZ/css3_animations/bgd1.jpg')}
/*Grande image*/
#item1:hover{background-image: url('http://mariouniversalis.no-ip.org/tutoSdZ/css3_animations/bgd1.jpg')}


li a
{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

li span
{
	position: absolute;
	display: block;
	height: 50px;
	line-height: 50px;
	margin: 0px;
	left: 0px;
	top: 150px;
	width: 100%;
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	transition-property: top;
	-moz-transition-property: top;
	-webkit-transition-property: top;
	-o-transition-property: top;
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
}

li:hover span
{
	top: 150px;
}
/*Taille de l'image la plus grande*/
li:hover {
	width: 200px;
	height: 200px;
}
</style>
 </head> 
 <body> 

		<ul>
			<li id="item1">
				<a href="#lien1">
					<span>
						Des pingouins
					</span>
				</a>
			</li>
		</ul>
     
</body> 
</html>

Legende et zoom au survol d'image

1 réponse

Discussions similaires

Newsletters