（如何）将鼠标悬停在徽标上时，向上变形并在下方显示文本？

Question

在我的网站上，我希望能够将鼠标悬停在徽标上，徽标会向上滑动（或变形），文本会出现在下方。将鼠标移开后，徽标将向下滑动并且文本消失。

我对 CSS 和 HTML 很陌生，一直在自学。

请帮帮我！

Answer 1

这应该让你开始：

/* The wrapper class that will contain the logo and the text */
.logo_wrapper {
  height: 40px;
  overflow: hidden;
}

/* The logo will be the same height as the wrapper and transition for 300ms */
.logo_wrapper img {
  height: 40px;
  width: auto;
  transition: transform 300ms;
}

/* The text should also transition for 300ms */
.logo_wrapper .logo_text {
  transition: transform 300ms;
}

/* When hovering over the wrapper, the logo and text will "translate" up 40px */
.logo_wrapper:hover img, .logo_wrapper:hover .logo_text {
  transform: translateY(-40px);
}

<div class="logo_wrapper">
  <img src="https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-logo.png" alt="Stack Overflow" />
  <div class="logo_text">Stack Overflow</div>
</div>

Answer 2

这是一个花了几分钟才完成的演示。动画是使用 CSS transition 完成的。如果您有任何问题，请告诉我。

.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>

（如何）将鼠标悬停在徽标上时，向上变形并在下方显示文本？

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

html

css

animation

graphical-logo