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
Si vous avez une solution à ce problème, je suis preneur et je vous en remercie!
Modifié par panacea (25 Apr 2014 - 11:55)
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)