如何在鼠標懸停時用文本動畫制作圖像-HTML + CSS + JS

Question

我正在建立一個網站作為產品介紹給客戶，我需要克隆以下功能：

有人知道如何實現這一目標嗎？

您可以在以下鏈接中預覽CatWalk Demo ： https : CatWalk Demo

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 US 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秒鍾在Google上搜索，然后用4粘貼並回答了那個家伙