Show text when hover in an image

How the example you link

If you look at the code, you can see that what Dribble does is that each "card" has different containers and elements within a div (simplifying): one contains the image, another contains the text with the description, another the options, and another the author.

The div containing the description of the image ( .dribbble-over ) has a default opacity of 0 (so it is invisible), and when the mouse is hovered over the container of the image ( .dribbble-img ), its opacity is changed to 1. All done with CSS and CSS transitions (no need to use JavaScript).

How to adapt that example to your code

The code you share in the question works in the opposite way: when you pass the mouse over the image, it loses its opacity and becomes almost invisible. But that's not a problem, it will only change the operation a bit.

What you should do:

• Create a container (a div ) that will have the image inside.
• Create a new container inside it to put the text that will be displayed.
• Position this last container absolutely and that is behind the image (with a z-index negative or less than that of the image)

Here is a simple example of how it could be:

.div-imagen {
  display:inline-block;
  position:relative;
}

.div-imagen > div {
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  padding:10px;
  margin:0;
}

.desvanecer:hover {
  opacity: 0.07;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
}

<div class="div-imagen">
  <div>
      Descripción de la foto que quieres que se muestre
  </div>
  <img class="desvanecer" src="http://placehold.it/200x200" />
</div>

Examples of how the effect could be done (only CSS ):

  

Show text when hovering in an image

# 1: with line-height :

.img-container {
  width: 300px;
  height: 200px;
  position: relative; 
}

.img-container p {
  margin: auto;  
  color: #fff;
  text-align: center;
  
  line-height: 200px; /* igual height de la imagen */
  
  background: #000;
  transition: opacity .4s linear;
  cursor: pointer;  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.img-container:hover p {
  opacity: .75;  
}

<div class="img-container">
    <img src="http://placehold.it/300x200">
    <p>Texto de prueba</p>
</div>

# 2: with padding :

.img-container {
  width: 300px;
  height: 200px;
  position: relative;
  line-height: 0;
}

.img-container p {  
  height: 0;
  margin: 0;
  
  padding: 100px 0; /* == mitad de la imagen (height) */
  
  color: #fff;
  text-align: center;  
  background: #000;
  transition: opacity .4s linear;
  cursor: pointer;  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.img-container:hover p {
  opacity: .75;  
}

<div class="img-container">
  <img src="http://placehold.it/300x200">
  <p>Texto de prueba</p>
</div>

# 3: with effect% text slide-up :

.img-container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.img-container:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: #000;
  opacity: 0;
  transition: opacity .3s linear;   
}

.img-container:hover:before { 
  opacity: .75;
}

.img-container p {
  width: inherit;  
  color: #fff;
  text-align: center;
  position: absolute;
  top: 100%; 
  transition: top .3s linear;
}

.img-container:hover p {    
  top: 70%;
}

<div class="img-container">
  <img src="http://placehold.it/300x200">
  <p>Texto de prueba</p>
</div>

# 4: similar to the example in the image:

body {
  background: #eee;
}

.img-container {
  width: 200px;
  height: 150px;
  padding: 10px 10px 30px 10px;
  background: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.img-container:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: #fff;
  opacity: 0;
  transition: opacity .1s ease-out;   
}

.img-container:hover:before { 
  opacity: 1;
}

.img-container .text-container {
  width: inherit;
  padding: 5px 15px;
  color: #444;
  position: absolute;
  top: 100%; 
}

.img-container:hover .text-container {    
  top: 0;
}

p {
  color: #888;
  font-size: .75em;
  line-height: .2em;
}

i {
  font-style: normal;
}

<div class="img-container">
  <img src="http://placehold.it/200x150">
  <div class="text-container">
    <h4>Titulo</h4>
    <p>Texto de prueba</p>
    <p>Texto de prueba</p>
  </div>
  <i>icons | icons | icons |<i/>
</div>

It is not an arduous task to do, reading a little you got it.

Steps:

let image = document.querySelector('.image');
let select = document.getElementById('effect');

select.addEventListener('change', function (e) {
  image.className = 'image ${this.value}';
});

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

.image {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
  height: 250px;
  overflow: hidden;
  margin: 15px auto;
  position: relative;
  width: 250px;
}

figure img {
  border-radius: 5px;
  height: 100%;
  transition: all .23s ease;
  width: 100%;
}

.image figcaption {
  color: #555;
  font-family: 'Exo';
  height: 100%;
  left: 0;
  line-height: 250px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  transition: all .23s ease;
  width: 100%;
}

.image.fade figcaption {
  opacity: 0;
  visibility: hidden;
}

.image.push figcaption {
  top: 0;
  transform: translateY(250px);
}

.image.push:hover > img {
  transform: translateY(-250px);
}

.image.push:hover > figcaption {
  transform: translateY(0px);
}

.image.fade:hover > img {
  opacity: 0;
  visibility: hidden;
}

.image.fade:hover > figcaption {
  opacity: 1;
  visibility: visible;
}

/* Form styles */
form {
  margin: 20px auto;
  width: 150px;
}

form label {
  font-family: 'Segoe UI', 'Open Sans';
  font-size: 14px;
  font-weight: 500;
}

form select {
  border: 1px solid #ddd;
  border-radius: 2px;
  font-family: 'Segoe UI', 'Open Sans';
  margin: 0 0 0 10px;
  padding: 0 1rem;
}

<figure class="image fade">
  <img src="http://4.bp.blogspot.com/-KcxlSXC0qk8/TeKSFXmSAjI/AAAAAAAAAS8/cYqGQolvNbs/s1600/3musicos.jpg">
  <figcaption>Los tres músicos</figcaption>
</figure>

<form>
  <label for="effect">Effect</label>
  <select id="effect">
    <option value="fade">Fade</option>
    <option value="push">Push</option>
  </select>
</form>

Perhaps using the title attribute, you can achieve what you want:

<img class="desvanecer" src="logo.png" title="Hola, esta es la información del logo." />

If you do not want to use frameworks I propose the following solution:

Use a div container of the image and a div brother of the image where the description of the hover event is stored.

then capture the hover event for the parent div, to hide and move the div of the description with css and jquery.

Another option is to use animate.css to perform the effects of movement.

HTML:

<body>
  <div class="contenedorImg">    
    <img  src="http://lorempixel.com/400/200/" />
    <div class="contenedorDescripcion">Contenido de la descripción</div> 
  </div>
</body>

CSS:

body{
  margin: 0;
}
.contenedorImg{
  width: 400px;
}
.contenedorDescripcion {   
   color : #FFF;
   width: 400px;
   height: 200px;
   position: absolute;
   top:200px;
   left:0;
   background: rgba(0,0,0,0.5);
   visibility: hidden;
   transition:  top 0.5s;
   }

   .muestraDescripcion{
     top: 0 !important;
   }

   .hidden{
       visibility: hidden !important;
   }
   .visible{
       visibility: visible !important;
   } 

Javascript (JQuery)

$(document).ready(function(){
    $(".contenedorImg").hover(
    function(){

        $(".contenedorDescripcion").addClass("visible muestraDescripcion");
    },
    function(){

    $(".contenedorDescripcion").removeClass("muestraDescripcion");
    setTimeout(
        function(){ 
        $(".contenedorDescripcion").removeClass("visible muestraDescripcion"); 
        $(".contenedorDescripcion").addClass("hidden");
        }, 300);
    }
    );
});

Check the example walking, the mouseleave to download the div can behave a little weird, but just a little more code js! link