如何在鼠标悬停时用文本动画制作图像-HTML + CSS + JS

Question

I am building a website as a presentation of product for my client and I have the need to clone the following feature:

Anyone know how to achieve this?

You can preview the CatWalk Demo in the following link: https://www.templatemonster.com/demo/61202.html

Answer 1

Is that what are you looking for?

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

Took me literally 4 seconds searching google and 4 to paste and answer it From that dude