(How to) When hovering over a logo, transforms up and text appears underneath?

On my website, I want to be able to hover my mouse over a logo, the logo will slide (or transform) up, and text will appear underneath. Once you move the mouse away, the logo will slide back down and the text disappears.

I am very new to CSS and HTML and have been self teaching myself.

Please help me out!

Solution

Here's a demo that took a couple minutes to whip up. The animations are accomplished using CSS transition. Let me know if you have any questions.

.logo {
  width: 180px;
  margin: 0 auto;
  position: relative;
}

.logo__image {
  width: 100%;
  transition: transform .5s;
}

.logo__text {
  color: darkorange;
  font-size: .9em;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.logo:hover .logo__image {
  transform: translateY(-20px);
}

.logo:hover .logo__text {
  opacity: 1;
}

<div class="logo">
  <img class="logo__image" src="https://i.imgur.com/l2DkgFN.png" />
  <span class="logo__text">Home of the Whopper</span>
</div>