如何使在悬停鼠标信号与文字动画形象 - HTML + CSS + JS

Question

我建立一个网站，作为产品的为我的客户介绍，我有需要克隆以下特点：

任何人都知道如何做到这一点？

您可以通过以下链接预览CatWalk Demo：https://www.templatemonster.com/demo/61202.html

Answer 1

那是你在找什么？

/* 
 
* Housekeeping 
 
*/ 
 
body { 
 
    font: normal 16px/1.5 Arial, sans-serif; 
 
} 
 

 
h1, p { 
 
    margin: 0; 
 
    padding: 0 0 .5em; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    max-width: 480px; 
 
} 
 

 
/* 
 
* Caption component 
 
*/ 
 
.caption { 
 
    position: relative; 
 
    overflow: hidden; 
 

 
    /* Only the -webkit- prefix is required these days */ 
 
    -webkit-transform: translateZ(0); 
 
      transform: translateZ(0); 
 
} 
 

 
.caption::before { 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: transparent; 
 
    transition: background .35s ease-out; 
 
} 
 

 
.caption:hover::before { 
 
    background: rgba(0, 0, 0, .5); 
 
} 
 

 
.caption__media { 
 
    display: block; 
 
    min-width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.caption__overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 10px; 
 
    color: white; 
 

 
    -webkit-transform: translateY(100%); 
 
      transform: translateY(100%); 
 

 
    transition: -webkit-transform .35s ease-out; 
 
    transition:   transform .35s ease-out; 
 
} 
 

 
.caption:hover .caption__overlay { 
 
    -webkit-transform: translateY(0); 
 
      transform: translateY(0); 
 
} 
 

 
.caption__overlay__title { 
 
    -webkit-transform: translateY(-webkit-calc(-100% - 10px)); 
 
      transform: translateY(calc(-100% - 10px)); 
 

 
    transition: -webkit-transform .35s ease-out; 
 
    transition:   transform .35s ease-out; 
 
} 
 

 
.caption:hover .caption__overlay__title { 
 
    -webkit-transform: translateY(0); 
 
      transform: translateY(0); 
 
}

<div class="container"> 
 

 
    <article class="caption"> 
 
     <img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" /> 
 
     <div class="caption__overlay"> 
 
      <h1 class="caption__overlay__title">Alaska</h1> 
 
      <p class="caption__overlay__content"> 
 
       Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait. 
 
      </p> 
 
     </div> 
 
    </article> 
 

 
</div>

我花了字面上4秒搜索谷歌和4粘贴，并回答它 从这个dude