html - Background change effect by rotation on hover via CSS3 -
html - Background change effect by rotation on hover via CSS3 -
i web developer. client's website need set effect on hover specific div shown in website . when hover on div background should alter rotating. how can this. can ease effect background alter using css3 transition. there way same without using jquery ?
see scrrenshot
jsbin
i simulate provide animation without jquery. key accomplish utilize parent & chidl relation , understand key point when animation play.
class="snippet-code-css lang-css prettyprint-override">.hover{ position: relative; width: 200px; height: 200px; background-color: #1cf; } .background{ position: absolute; width: 100%; height: 100%; color: #fff; text-align: center; line-height:10; background-color: #c33; transition: 0.3s; z-index: 2; font-size: 20px; } .content{ position: absolute; width: 100%; height: 100%; background-color: #fff; text-align: center; font-size: 20px; opacity: 0; line-height: 10; transform: scale(-1,1); transition: 0.3s; } .hover:hover .background{ transform: scale(-1,1); opacity: 0; } .hover:hover .content{ transform: scale(1,1); opacity: 1; } class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> <meta charset="utf-8"> <title>js bin</title> </head> <body> <div class="hover"> <div class="background"> background!!! </div> <div class="content"> content! </div> </div> </body> </html>
html css3 css-animations rotateanimation
Comments
Post a Comment