name hover image with flex item
hello everyone
I have a flex-container and inside i have flex item for each image i have on database.
I want do hover images and show the name of the image.
I have try different ways but in all of them i lost the responsive from flex container and flex images
what i really want is when hover, dark images and show name in white letter, but if hover and show name in bottom of image, is also good HTML:
<div class="flex-container"> <?php $sql = "SELECT * FROM eventos WHERE estado = 1"; $result = $conn->query($sql); // output data of each row while ($row = mysqli_fetch_assoc($result)) { $id_evento = $row['id_evento']; $nome = $row['nome']; $descricao = $row['descricao']; $imagem = $row['imagem']; $data = $row['data']; $local = $row['local']; ?> <a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $id_evento; ?>"> <div class="col-sm-4"> <div class="flex-item"> <?php echo '<img src="backoffice/upload/' . $imagem . '" alt="' . $nome . '" class="grid-image">'; ?> </div> </div> </a> CSS:
.flex-container { display: flex; flex-flow: row wrap; justify-content: space-between; padding: 0; margin-left: 10%; margin-right: 10%; list-style: none; } .flex-item { width: 250px; height: 200px; margin-top: 6%; margin-left: 3%; margin-right: 3%; margin-bottom: 50%; line-height: 150px; color: white; font-weight: bold; font-size: 200%; text-align: center; border-radius: 15px; } .modalt { font-family: "Oswald"; font-weight: bold; text-transform: uppercase; } .flex-item:hover { border: 3px solid black; opacity: 1; } .flex-item .grid-image { width: 100%; height: 100%; border-radius: 15px; } .image-modal { width: 100%; height: auto; } 
It can be done with position absolute to get title in position with hover effect
.gallery { display: flex; justify-content: center; width: 100%; flex-wrap: wrap } .item { position: relative; width: 50%; cursor: pointer; width: 23%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #000; } .item:hover .overlay { opacity: .5; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }<div class="gallery"> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/04/25/21/14/woman-1353211_1280.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/04/25/21/14/woman-1353211_1280.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/04/25/21/14/woman-1353211_1280.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/04/25/21/14/woman-1353211_1280.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/04/25/21/14/woman-1353211_1280.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/04/25/21/14/woman-1353211_1280.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div>
