How to make an image with link appear a text

Question

I need to make a code so that a button (which is an image) when I move the mouse the image will go up and a text descend (name of the image icon), already tried to leave the button with opacity(0) and a Hover with opacity(1) of the text there when the image raise the text appears, however it did not work because the text is in front(z-index did not work) if someone has another idea...

-> how does it look

-> as it should be (then the image goes up and the title appears)

[excuse the quality of the photo]

Answer 1

Friend if I understand well this is the effect you need. I did it in the simplest way to be more didactic.

Basically you have a text with poition:absolute and z-index:-1 when you do the :hover in the .wrapper to img makes a transform:translateY(-40px) and the text appears from behind.

.wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    overflow:hidden;
}
.wrapper img {
    transition: transform 500ms ease;
}
.wrapper:hover img {
    transform: translateY(-40px);
}
.wrapper .txt {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    font-size: 2rem;
    color: red;
    z-index: -1;
}

<div class="wrapper">
    <div class="txt">Texto</div>
    <img src="http://placecage.com/100/100" alt="">
</div>

Answer 2

Using transition of CSS, can be done as follows. You can see more about this property in page of the MDN

button {
  padding: 8px 14px;
  background: #0084ff;
  background-image: url("https://s19.postimg.cc/4khrr69kz/img_1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  
  color: transparent;
  background-position: 0 0px;
  transition: .7s ease-in-out 0s;
}

button:hover {
  color: #fff;
  background-position: 0 -50px;
  transition: .7s ease-in-out 0s; 
}

<div>
  <button>Change color</button>
</div>

A way using jQuery is the following.

$(document).ready(function() {

// DOM cache
var $banner = $("#banner-message");
var $button = $("button");

// Button properties
var bColor = {
    over : $button.css("color"),
    out  : "transparent"
}

// Set color
$button.css({ "color" : bColor.out });

// Events
$button.on("mouseover", function() {
    var height = $button.css("height");
    
    $(this).animate({ 
        "background-position-y" : "-=" + height
    }, 500, function() {
        $(this).css("color", bColor.over);
    });
});

$button.on("mouseout", function() {
    
    $(this).css("color", bColor.out);
        $(this).animate({ 
        "background-position-y" : 0
    }, 500);
})

});

button {
  padding: 8px 14px;
  background: #0084ff;
  background-image: url("https://s19.postimg.cc/4khrr69kz/img_1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>Change color</button>
</div>

But this jQuery script will need adaptations if there is more than one button on the page.

Answer 3

A simple way is to use the image of the button as the background of the link, so you can put a specific background for each button, and use a proper tag for the text and make the transition: the button goes up and the text goes down:

body{
   background: orange;
}

.botao{
   width: 100px;
   height: 100px;
   position: relative;
   float: left;
   margin: 5px;
}

.botao a{
   width: 100%;
   height: 100%;
   display: inline-block;
   background-size: cover;
   position: absolute;
   left: 0;
   top: 0;
   border-radius: 10px;
   -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
   transition: all .3s ease;
}

.botao a b{
   color: #fff;
   width: 100%;
   text-align: center;
   position: absolute;
   bottom: 0;
   z-index: -1;
   opacity: 0;
   transition: all .3s ease;
}

.botao:hover a{
   top: -15px;
}

.botao:hover a b{
   bottom: -20px;
   opacity: 1;
}

<div class="botao">
   <a href="#" style="background-image: url(https://static.abcteach.com/free_preview/a/astronomybnw_p.jpg);">
      <b>Astronomia</b>
   </a>
</div>
<div class="botao">
   <a href="#" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfDlmiriiir4kVcIu0CDe1j0Rd2rTxD8rSPAuGBABkZZ9KpzBfFQ);">
      <b>Geografia</b>
   </a>
</div>