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

问题描述：

我建立一个网站，作为产品的为我的客户介绍，我有需要克隆以下特点：如何使在悬停鼠标信号与文字动画形象 - HTML + CSS + JS

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

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

看起来像一个显示/隐藏一些小动画，可以用CSS做，你试过什么了？ – Huangism

答

那是你在找什么？

/* 
 
* 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

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

相关推荐