0

me pasa esto con mi imagen. El figcaption se "desborda", al desplegarlo en tamaño 760 px. introducir la descripción de la imagen aquí

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>

1
  • Seria mas facil poder ayudarte si lo pasas a un Pen de Codepen para visualizar bien el codigo el 3 mar. 2019 a las 21:35

1 respuesta 1

1

Añade lo siguiente a tu css, asi el figcaption tendra el ancho de la imagen ya que el figure se adaptara a esta.

#web figure {
   display: inline-block;
}
5
  • HOla, no funciona, en vez del div tengo una imagen, aun poniendo figure>img no funciona.
    – Paula
    el 27 feb. 2019 a las 17:18
  • ¿Podrias incluir en la pregunta tu codigo original? Sera más facil encontrar la solución. el 27 feb. 2019 a las 17:23
  • Ya lo he subido
    – Paula
    el 27 feb. 2019 a las 18:02
  • Ya edite la respuesta, dime si asi funciona el 27 feb. 2019 a las 18:29
  • sí funciona!! Mil gracias!!
    – Paula
    el 28 feb. 2019 a las 17:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.