Hover with text on div with image inside

Question

I have this code:

<!DOCTYPE html>
<html lang="pl">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link href="assets/css/bootstrap.min.css" rel="stylesheet">
      <script src="assets/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 profil_zd">
         <div class="profil_zd_1"><a href="pl/Zdjecie/12"><img src="assets/uploads/posts/t4G9Q23vJrXOfBkHEYx0MbsycWd6gwo5Vjla7UnLKApZS18qDINTimPhuReC.jpg" class="img-responsive center profil_zd_2 profil_zd_2XXX"></a></div>
         <div class="middleImage">
            <div class="post-info">254</div>
            <div class="text">name and surname<img src="assets/images/ikon22.png" class="deleteMyAccount " id=""></div>
         </div>
      </div>
      <style>
         .middleImage {
         transition: .5s ease;
         opacity: 0;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         text-align: center;
         }
         .profil_zd_1:hover .profil_zd_2XXX {
         opacity: 0.5;
         }
         .profil_zd_1:hover .middleImage {
         opacity: 1;
         }
         .profil_zd_2 {
         border-radius: 25px;
         }
         style.css:135.center {
         margin: 0 auto;
         }
      </style>
   </body>
</html>

Prview: http://serwer1356363.home.pl/pub/rrrrr/ What I need: http://serwer1356363.home.pl/pub/rrrrr/sample.png

I need hover effects (after hovering the mouse on the photo), a picture with the number of voices and text (for samples) must be displayed. Does anyone know how to fix my code?

Answer 1

For text overlay on image you can follow this simple process from w3schools :

 .outer { background-color: #000000; width: 90vw; padding: 100px; } .container { position: relative; width: 50%; border: 5px solid white; } .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: #000000; } .container:hover .overlay { opacity: 0.7; } .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="outer"> <div class="container"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> </div>

Hover with text on div with image inside

Question

1 answers

solution1
1 ACCPTED 2019-02-09 10:21:58

Hover with text on div with image inside

Question

1 answers

solution1 1 ACCPTED 2019-02-09 10:21:58

solution1
1 ACCPTED 2019-02-09 10:21:58