Legende et zoom au survol d'image

Kaldorann Messages postés 1 Statut Membre -  
tryan44 Messages postés 1381 Statut Membre -
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 :)
A voir également:

1 réponse

Réponse 1 / 1
tryan44 Messages postés 1381 Statut Membre 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>

0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse