Bonjour a tous!
je suis débutant dans le monde du HTML et CSS, et je souhaite réaliser mon premier site portfolio personnel.
Cependant je flanche......

Explication du problème :
je souhaite créer un effet de survol d'image, qui une fois survolé, l'image ce place dans un bloc situer dessous ma ligne de miniature, exemple en photo :
http://hpics.li/7edcd23

Cependant je n'arrive pas a forcer mes images a ce placer dans la meme zone prédéfinie, elles s'alignes par rapport a leurs miniatures correspondante, exemple en photo :
http://hpics.li/fc1eb32


#article78 ul{
	margin-left:auto;
	margin-right:auto;
	display:inline-block;
	width: 100%;
	text-align:center;
	}

#article78 ul li{
	position: relative;
    display: inline-block;
	margin:auto;
	margin-bottom:5px;
	width: 100px;
	height: 100px;
	float:none;
	}

#article78 ul li:nth-child(3){
	clear:left;
	}

#article78 ul li img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	box-shadow:#000 1px 2px 2px;
	z-index: 0;
	border-radius:15px;
	-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
   	-moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
    -ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
    -o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
    transition: all .5s cubic-bezier( .6, 2, .4, 1);
	}

#article78 ul li:hover img{
	width: 400px;
	margin-top:150px;
	z-index: 100;
	position: absolute;
  left: 50%;
  margin-left:-200px;
  box-shadow:#000 0px 5px 30px;
	}

#article78 ul:hover li img:not(:hover) {
	-webkit-filter: grayscale(1) blur(5px);
	filter: grayscale(1) blur(5px);
	}


Si vous avez une solution à ce problème, je suis preneur et je vous en remercie!
Modifié par panacea (25 Apr 2014 - 11:55)
salut,
je ne sais pas si j'ai tout compris mais j'ai essayé de faire un truc qui ressemble.
Par contre le faire au ":hover" ne doit pas très pratique, peut être privilégier le ":focus" ?
Par contre c'est un code assez dépendant des dimensions des <li> et donc pas très flexible et assez pénible à maintenir.