2

Estoy intentando hacer una galería de imágenes que muestra datos que tengo almacenados en la base de datos mediante php, pero no consigo aclararme sobre como hacerlo. Mi idea es que se muestren de esta forma: introducir la descripción de la imagen aquí

pero se me muestran así:

introducir la descripción de la imagen aquí

es decir, me gustaría que saliese el enlace a detalles y los nombres debajo de cada foto, y que pudiese hacer por ejemplo 3 columnas y 3 filas... y no se muy bien como hacerlo. este es el trozo de código donde hago el foreach (php) que me muestra todos los datos de la bd:

 <?php foreach ($mostrar as $resultado){ ?>
        <div class="container">
           
            
            <img src="<?php echo $resultado->img ?>">
            <div class="name"><h5><?php echo $resultado->nombre; ?></h5></div>
                <div class="detalles">
                
      
                <div class="hipervinculo">  <a href="#"> Detalles</a> </div>
                </div>
           <?php } ?> 
        </div>

CÓDIGO CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

body {
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    align-items: center;
}

.container {
    font-family: "Roboto";
    display: flex;
}


img {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin-right:30px; 
    max-height:200px; 
    max-width:400px; 
    object-fit:contain;
    align-items:  "left";
}

img:hover { /*efecto al pasar ratón x encima*/
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
7

1 respuesta 1

4

El fallo que tenías con flex es que por defecto usa flex-direction: row;

Si leas en el manual el comportamiento de row nos dice:

row: El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los puntos principales de inicio y final son los mismos que la dirección del contenido

Por eso te esta alineando tu imagen con el texto. Te dejo un completo guia de como usar FLEXBOX

En mi ejemplo uso display:grid, que veo mejor para este caso. Te he dejado también un @mediascreen para que veas como podrías cambiar el total de 4 a 2 según ancho pantalla, así lo puedes personalizar.

Aquí una guía de cómo usar GRID

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body {
  font-size: 16px;
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

a {
  text-decoration: none;
  transition: color linear;
}


/* Usamos GRID */

.container {
  font-family: "Roboto";
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.container img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 100%;
  object-fit: contain;
  align-items: "left";
  transition: 0.3s;
}

.container img:hover {
  /*efecto al pasar ratón x encima*/
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container .detalles {
  display: block;
  position: relative;
  margin: .5rem 0 1rem 0;
}

.contenido .video_camara {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.detalles .titulo_detalles {
  font-size: 1.2rem;
  margin: 0;
}

.detalles .hipervinculo_detalles {
  color: black;
}

.detalles .hipervinculo_detalles:hover {
  color: blue;
}


/* Responsive design, ya lo dejas a tu gusto */

@media screen and (max-width: 500px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
<div class="container">

  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <span class="video_camara">&#128249;</span>
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>

  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>


  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>


  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>


  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <span class="video_camara">&#128249;</span>
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>


  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>


  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>


  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <span class="video_camara">&#128249;</span>
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>


  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>

  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <span class="video_camara">&#128249;</span>
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>

  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>

  <div class="contenido">
    <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?t=st=1647352028~exp=1647352628~hmac=87aeedb0e58a980b194295ed79873aee37f170de8395c8148975241ec3559ba1&w=996"
    />

    <div class="detalles">
      <h5 class="titulo_detalles">Titulo</h5>
      <a class="hipervinculo_detalles" href="#"> Detalles</a>
    </div>
  </div>
</div>

Tu PHP debería quedar así:

<div class="container">
    <?php 
    foreach ($mostrar as $resultado) : ?>

        <div class="contenido">

            <img src="<?php echo $resultado->img ?>" alt='' />

            <div class="detalles">
              <!-- optional camara -->
              <span class="video_camara">&#128249;</span>
              <h5 class="titulo_detalles"><?php echo $resultado->nombre; ?></h5>
              <a class="hipervinculo_detalles" href="#">Detalles</a>
            </div>

        </div>
        
    <?php 
    endforeach; 
    ?> 
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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