me pasa esto con mi imagen. El figcaption se "desborda", al desplegarlo en tamaño 760 px.
No sé por qué. He puesto que figcaption tenga position absolute y figure, relative, estando figcaption dentro de figure como debería ser y overflow hidden.
#web figure {
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
overflow: hidden;
}
figure:hover figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
opacity: 1;
top: 0;
}
figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,.7);
color: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
-o-transition-delay: .2s;
-ms-transition-delay: .2s;
transition-delay: .2s;
overflow: hidden;
}
figcaption h6 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: white;
padding: 30px 20px;
margin-bottom: 0;
position: relative;
right: 100%;
margin-top: 37px;
font-size: 2em;
}
figcaption p {
font-family: 'Roboto', sans-serif;
padding: 10px 20px;
margin-bottom: 0;
margin-top: 20px;
position: relative;
left: 100%;
font-size: 1.1em;
letter-spacing: 1px;
}
figure:hover h6,figure:hover p {
left: 0;
}
figcaption a {
color: #fff;
border: 2px solid #fff;
padding: 4px 10px;
text-decoration: none;
}
figcaption a:hover {
color: #4f5856;
background: #fff;
}
/*.paginas img {
width: 80%;
}
.paginas {
position: relative;
}*/
.tabla {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
display: flex;
flex-flow: row wrap;
}
.tercio {
overflow: hidden;
width: 25%;
}
@media screen and (min-width:600px) {
.tercio {
width: 25%;
}
}
@media screen and (max-width:970px) {
.tercio{
width: 50%;
}
figcaption p {
font-size: .8em;
padding: 5px 10px;
}
figcaption p a {
font-size: .8em;
}
figcaption {
height: 100%;
text-transform: uppercase;
}
}
@media screen and (max-width:1200px) {
.tercio {
width: 100%;
}
}
<section id="web">
<div>
<div class="align-center cabeceraWeb">
<header>
<h3>algunos proyectos realizados</h3>
<hr>
</header>
</div>
<div class="paginas">
<ul class="tabla">
<li class="tercio">
<figure>
<img src="img/estructural/nite.jpg">
<figcaption>
<h6>Nite</h6>
<p>Proyecto fotografía nocturna</p>
<p><a href="#" target="_blank">ver en youtube</a></p>
</figcaption>
</figure>
</li>
<li class="tercio">
<figure>
<img src="img/estructural/oceanus.jpg">
<figcaption>
<h6>Oceanus</h6>
<p>Proyecto divulgación científica</p>
<p><a href="#" target="_blank">ver en youtube</a></p>
</figcaption>
</figure>
</li>
<li class="tercio">
<figure>
<img src="img/estructural/casaRural.jpg">
<figcaption>
<h6>Casa Rural</h6>
<p>Proyecto Casa Rural Callejón de la Gata</p>
<p><a href="#">ver en youtube</a></p>
</figcaption>
</figure>
</li>
<li class="tercio">
<figure>
<img src="img/estructural/olas.jpg">
<figcaption>
<h6>Oceanus 2</h6>
<p>Proyecto divulgación científica</p>
<p><a href="#">en construcción</a></p>
</figcaption>
</figure>
</li>
</ul>
</div>
</section>