Why all my styles go wrong when I add figcaption? - html

Question

I have a gallery on my site, but when I add figcaption it all goes wrong and each picture becomes central. What have I done incorrectly? I really can not imagine how to improve it.
#image{
position: inherit;
width:300px;
-webkit-transition:all 1s;
transition:all 1s;
margin-top:10px;
}
#image:hover{
position: inherit;
-webkit-transform:scale(3);
transform:scale(3);
margin: 0 auto;
highslide: auto;
}
figure.img img {
max-width: 300px;
height: auto;
}
figure.img figcaption {
padding: 5px;
font: bold italic 90% Georgia,serif;
color: #17432e;
width: 300px;
margin-left: 0px;
}
.pictures {
margin: 100px auto;
width: 980px;
}
.clear {
clear: both;
}
Then in body I have after all changes according to your advice
<div align="center">
<figure class="img">
<img id="image" src="pics/1.jpg" class="passe-partout">
<figcaption>In the village</figcaption>
</figure>
<figure class="img">
<img id="image" src="pics/2.jpg" class="passe-partout">
<figcaption>August</figcaption>
</figure>
<figure class="img">
<img id="image" src="pics/3.jpg" class="passe-partout">
<figcaption>The bridge</figcaption>
</figure>
<figure class="img">
<img id="image" src="pics/4.jpg" class="passe-partout">
<figcaption>A cute house</figcaption>
</figure>
<div class="clear"></div>
</div>

Answer 1

Here is the working solution.
---CSS Code--
figure img{
position: inherit;
width:300px;
-webkit-transition:all 1s;
transition:all 1s;
margin-top:10px;
}
figure img:hover{
position: inherit;
-webkit-transform:scale(3);
transform:scale(3);
margin: 0 auto;
highslide: auto;
}
figure> figcaption {
padding: 5px;
font: bold italic 90% Georgia,serif;
color: #17432e;
width: 300px;
margin-left: 0px;
}
/----HTML Code -----/
<div align=center class="pictures">
<figure class="img">
<img id="image" src="http://lorempixel.com/200/200" class="passe-partout">
<figcaption>In the village</figcaption>
</figure>
<figure class="img">
<img id="image" src="http://lorempixel.com/200/200" class="passe-partout">
<figcaption>In the village</figcaption>
</figure>
<figure class="img">
<img id="image" src="http://lorempixel.com/200/200" class="passe-partout">
<figcaption>In the village</figcaption>
</figure>
</div>
Here is a Working Demo. http://jsbin.com/musovipo/1/

Answer 2

I've made the code more valid by removing the multiple identical id's
and wrapping each img/figcaption pair with a figure element. To show the figures on same line, display: inline-block was added to the figure elements
CSS
div.img img {
width: 300px;
max-width: 300px;
height: auto;
position: inherit;
-webkit-transition: all 1s;
transition: all 1s;
margin-top: 10px;
}
div.img img:hover {
position: inherit;
-webkit-transform: scale(3);
transform: scale(3);
margin: 0 auto;
highslide: auto;
}
div.img figcaption {
padding: 5px;
font: bold italic 90% Georgia,serif;
color: #17432e;
width: 300px;
margin-left: 0px;
}
div.img figure {
display: inline-block;
}
HTML
<div class="img">
<div align=center class="pictures">
<figure>
<img src="pics/1.jpg" class="passe-partout">
<figcaption>In the village</figcaption>
</figure>
<figure>
<img src="pics/2.jpg" class="passe-partout">
<figcaption>August</figcaption>
</figure>
<figure>
<img src="pics/3.jpg" class="passe-partout">
<figcaption>The bridge</figcaption>
</figure>
<figure>
<img src="pics/4.jpg" class="passe-partout">
<figcaption>A cute house</figcaption>
</figure>
<div class="clear"></div>
</div>
</div>