My website has a gallery, but as soon as I add figcaption to the images, everything seems to shift to the center. What am I doing wrong? I'm at a loss on how to fix this issue.
#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;
}
After making all the recommended changes, my body now looks like this:
<div align="center">
<figure class="img">
<img id="image" src="pics/1.jpg" class="passe-partout">
<figcaption>Exploring nature</figcaption>
</figure>
<figure class="img">
<img id="image" src="pics/2.jpg" class="passe-partout">
<figcaption>Summer vibes</figcaption>
</figure>
<figure class="img">
<img id="image" src="pics/3.jpg" class="passe-partout">
<figcaption>Urban beauty</figcaption>
</figure>
<figure class="img">
<img id="image" src="pics/4.jpg" class="passe-partout">
<figcaption>Cozy retreat</figcaption>
</figure>
<div class="clear"></div>
</div>