No one to share a link to tutorial? Here's what you need: http://ssmaker.ru/673d0102.jpg

Closed due to the fact that the essence of the issue is incomprehensible by the participants RussCoder , Vladimir Martyanov , installero , ermak0ff , PashaPash ♦ 26 Sep '15 at 9:19 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    This effect can be done like this: http://jsfiddle.net/IonDen/d3qpgp4y/

    <div class='test'> <div class='test-caption'> <div class='test-icon'></div> </div> </div>

    CSS:

     .test { position: relative; width: 200px; height: 200px; background: #000; } .test-caption { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: rgba(255, 255, 255, 0.5); transition: all 250ms cubic-bezier(0.455, 0.030, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); } .test:hover .test-caption { height: 100%; } .test-icon { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; background: #f00; }

    Animations can be customized using this animation designer: http://matthewlein.com/ceaser/ or this plugin: Animate.css