WebDev%20For%20You%20-%20Daily%20Interaction%20%23128 - by WebDev%20For%20You
Created on Thu May 23 2019 03:23:21 GMT+0000 (Coordinated Universal Time)
This responsive website has 1575 views, 2 comments, and 43 likes.
Welcome%20to%20Daily%20Interaction%20%23128.%0A%0AThis%20demo%20showcases%20a%20project%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20a%20panel%20rotates%20in%20from%20the%20left%20to%20reveal%20more%20information%20about%20the%20image%2C%20and%20the%20image%20also%20slides%20to%20the%20right%2C%20as%20if%20to%20make%20room%20for%20the%20panel.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20an%20image%20wrapper%20and%20a%20content%20wrapper%20within%20a%20wrapper%20with%20a%20child%20perspective%20applied%20to%20it.%20The%20content%20wrapper%20was%20set%20to%2050%25%20within%20the%203d-wrapper%20and%20the%20transform-origin%20was%20set%20to%20the%20left%20so%20it%20would%20rotate%20in%20from%20the%20left%20side.%20Another%20div%20block%20with%20the%20background%20image%20was%20added%20inside%20of%20the%20image%20wrapper%2C%20and%20the%20image%20wrapper%20was%20set%20to%20an%20overflow%20of%20hidden%20so%20that%20when%20the%20image%20slides%20to%20the%20right%20you%20don%27t%20see%20it%20beyond%20the%20bounds%20of%20the%20image%20wrapper.%20In%20interactions%20I%20rotated%20the%20content%20wrapper%20from%20-90%20degrees%20to%200%20degrees%2C%20and%20moved%20the%20image%20to%20the%20right%2050%25.%0A%0AInspired%20by%3A%20https%3A//tympanus.net/Tutorials/CaptionHoverEffects/index4.html%0A%0Ahttps%3A//www.webdevforyou.com/
Visit http://webdev-for-you-daily-interaction-128.webflow.io
