（How to）ロゴの上にカーソルを置くと、変形して上にテキストが表示されますか？

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>