Nice CSS3 Transition with Google Chrome Logos - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div id="cf"> <img class="bottom" src="http://cssdeck.com/uploads/media/items/6/6NyhMy8.jpg" /> <img class="top" src="http://cssdeck.com/uploads/media/items/0/0UycnoM.jpg" /> </div>

#cf{ position:relative; width:250px; height: 300px; margin: 0 auto; } #cf img{ position:absolute; left:0; top: 0; -webkit-transition:opacity 1s ease-in-out; -moz-transition:opacity 1s ease-in-out; -ms-transition:opacity 1s ease-in-out; -o-transition:opacity 1s ease-in-out; transition:opacity 1s ease-in-out; } #cf img.top { left: 20px; top: -5px; } #cf img.top:hover{ opacity:0; } img.bottom{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

Tutorials Palace 20 December, 2018 No Comments

164 Views