imagem Texto na imagem

[Artur Mendonça 0]

Olá amigos.

espero que estejam todos bem.

 

Estou tentando criar uma galeria de imagens e colocar nestas um botão para votação (Gosto como no Facebook).

Já consegui criar a galeria e colocar o Like nas imagens, mas acontece que quando  as imagens passam para a linha de baixo o botão Like não acompanha a imagem.

 

Junto uma imagem para exemplificar como está e como deveria ser.

 

O CSS está assim

h1 {
    text-align: center;
    color: forestgreen;
    margin: 30px 0 50px;
}

.container h2 {
    text-align: center;
    color: rgb(8, 8, 8);
    margin: 30px 0 50px;
}

.gallery {
    margin: 10px 50px;
    padding-right: 0px;
    padding-left: 0px;
}

.gallery img {
    width: 230px;
    padding: 0px;
    opacity: 0.5;
    filter: grayscale(10%);
    transition: 1s;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    border: 2px solid #ccc;
    border-radius: 10%;
}

.ilike {
    display: grid;
    border-radius: 10%;
    box-sizing: border-box;
    text-align: left;
    padding: 15px;
    font-size: 20px;
    vertical-align: top; 
    position: absolute;
    z-index: 1000;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    color: white;
}

O código da página da galeria de fotos está assim:

<div class="gallery">
<?php
$sql = "SELECT * FROM tbl_gallery where aid=$aid";
$num_rows = mysqli_num_rows(mysqli_query($conectar, $sql));

$result = mysqli_query($conectar, $sql);

while ($row = mysqli_fetch_array($result)) {

    $gimage = $row['gimages'];
    $fotoid = $row['gid'];
    $likes = $row['likes'];
  

    ?> <a href="páginapararegistarovoto" ?>
	"><i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a>
<i class="inum" > <?php echo "Foto " . $fotoid; ?> </i>
	<?php

    echo "<a href='../fotos/$gimage' data-lightbox='mygallery' data-title='Foto n.º: $fotoid'><img src='../thumbnails/$gimage' class='pic'></a>";

} ?>
</div>

 

 

 

[Omar~ 87]

Simples sua tag <a> deve está dentro de uma tag <div> essa recebe a propriedade "relative".

• A tag <a> vai dentro da <div> relativa
• A tag <a> recebe a propiedade "block"
• A imagem vai dentro da tag <a>
• O elemento de "LIKE" dentro da taga <div> relativa fora da tag <a>.
• O elemento de "LIKE" recebe a propriedade "abusolute"

No mais o resto é posicionar o elemento do "LIKE" usando left e top

[Artur Mendonça 0]

Muito obrigado Omar~.
Infelizmente não estou conseguindo fazer com que funcione (não tenho muitos conhecimentos de php).

 

Coloquei assim:

while ($row = mysqli_fetch_array($result)) {

    $gimage = $row['gimages'];
    $fotoid = $row['gid'];
    $likes = $row['likes'];
    $dislikes = $row['dislikes'];
    ?>
<div class="princ">
	<div class="a">
    <a href="../administrar/processa/proc_cad_voto.php?foto=<?php echo $fotoid; ?>"> <i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a>
</div>
<a href="../fotos/<?php echo $gimage ?>" data-lightbox="mygallery" data-title="Foto n.º: <?php echo $fotoid ?>"><img src="../thumbnails/<?php echo $gimage ?>" class="pic"></a>
<i class="inum" > <?php echo "Foto " . $fotoid; ?> </i>

</div>

<?php
}?>

E no CSS coloquei assim:

.gallery img {
    width: 230px;
    padding: 0px;
    opacity: 0.5;
    filter: grayscale(10%);
    transition: 1s;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    border: 2px solid #ccc;
    border-radius: 10%;

}

.princ {
    position: relative;
}

.a {
    display: block;

}

.ilike {
    text-align: left;
    padding: 15px;
    font-size: 20px;
    vertical-align: top;
    position: absolute;
    z-index: 1000;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    color: white;
}

Mas as imagens ficam dispostas na vertical e não na horizontal....