Legende et zoom au survol d'image

Kaldorann Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
tryan44 Messages postés 1288 Date d'inscription   Statut Membre Dernière intervention   -
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 1288 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>

0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses