（如何）懸停在徽標上方時，會變換並在下方顯示文字？

Question

在我的網站上，我希望能夠將鼠標懸停在徽標上，徽標將滑動（或變形），並且文字將出現在下方。一旦將鼠標移開，徽標將向下滑動，文本消失。

我是非常新的CSS和HTML，並已自我自學。

請幫我一把！

Answer 1

下面是花了幾分鐘掀起演示。動畫使用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>

Answer 2

這應該讓你開始：

/* 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/stackoverflow/company/img/logos/so/so-logo.png" alt="Stack Overflow" /> 
 
    <div class="logo_text">Stack Overflow</div> 
 
</div>