https://webdev-for-you-daily-interaction-10.webflow.io/

1<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com --><!-- Last Published: Sun Aug 07 2022 15:44:04 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="webdev-for-you-daily-interaction-10.webflow.io" data-wf-page="5b5666dd314bb969ddcf6957" data-wf-site="5b5666dd314bb9f305cf6956"><head><meta charset="utf-8"/><title>Daily Interaction #10 | WebDev For You | Made in Webflow</title><meta content="This demo showcases a product with an image reveal effect in Webflow." name="description"/><meta content="Daily Interaction #10 | WebDev For You | Made in Webflow" property="og:title"/><meta content="This demo showcases a product with an image reveal effect in Webflow." property="og:description"/><meta content="Daily Interaction #10 | WebDev For You | Made in Webflow" property="twitter:title"/><meta content="This demo showcases a product with an image reveal effect in Webflow." property="twitter:description"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://assets.website-files.com/5b5666dd314bb9f305cf6956/css/webdev-for-you-daily-interaction-10.webflow.81d2999f9.css" rel="stylesheet" type="text/css"/>

1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>

1<script type="text/javascript">WebFont.load({  google: {    families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","IBM Plex Sans:300,regular,500,600,700"]  }});</script>

1<!--[if lt IE 9]>

1<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>

1<![endif]-->

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://assets.website-files.com/5b5666dd314bb9f305cf6956/5b5666dd314bb95b3acf696c_webflow-for-you-mark-32x32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://assets.website-files.com/5b5666dd314bb9f305cf6956/5bad7d693bde124aad7ceccb_webdev-for-you-mark-256x256.png" rel="apple-touch-icon"/><style>
2body, button, input, select, textarea {
3  -webkit-font-smoothing: antialiased;
4  -moz-osx-font-smoothing: grayscale;
5  -webkit-text-size-adjust: 100%;
6  -moz-text-size-adjust: 100%;
7  -ms-text-size-adjust: 100%;
8  text-size-adjust: 100%;
9}
10body {
11	overflow-x: hidden;
12}
13.w-lightbox-backdrop {
14	z-index: 99999;
15}
16</style></head><body><div class="d-10-section-home wf-section"><div class="demo-container"><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9640" style="-webkit-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="demo-banner-top"><a data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9641" style="opacity:0;-webkit-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" href="https://www.webdevforyou.com/" class="demo-mark-logo-wrapper w-inline-block"><img src="https://assets.website-files.com/5c577e0f046430f4d4b28a6c/5c577e0f046430631bb28a7d_Logo.svg" alt="" class="demo-mark"/><img src="https://assets.website-files.com/5c577e0f046430f4d4b28a6c/5c577e0f0464306a4cb28a7c_webdev-for-you-logomark.svg" width="130" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9643" style="opacity:0" alt="" class="demo-logo-mark"/></a><h3 data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9644" style="opacity:0;-webkit-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-heading h3">#10: Product Showcase with Image Reveal on Load</h3></div><div class="demo-main-text-wrapper"><h1 class="demo-heading h1">Welcome to Daily Interaction 67</h1><h2 class="demo-heading h2">Add to Cart Button Animation on Hover</h2><div class="separator"></div><p class="demo-p main">This example showcases moving lines around an image. The image also has a 3d rotation on hover.</p></div><div class="demo-wrapper"><div class="instructions-wrapper"><p class="demo-p arrow">do the honors,<br/>hover over the button!</p><img src="https://assets.website-files.com/5c345004f07efebe2593a215/5c3dc840fa928d0e6c194746_arrow.svg" width="35" alt="" class="image-2"/></div><div class="browser-demo"><div class="browser-top"><div class="browser-dot"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div></div><div class="d-10-row w-row"><div class="column w-col w-col-6 w-col-stack w-col-tiny-tiny-stack"><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac965c" style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="d-10-block"></div><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac965d" style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="d-10-block two"></div><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac965e" style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="d-10-block three"></div><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac965f" style="display:none" class="d-10-block four"></div></div><div class="column-2 w-col w-col-6 w-col-stack w-col-tiny-tiny-stack"><h1 class="d-10-heading">DPX-8L</h1><p class="d-10-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p><a href="#" class="link w-button">

16Learn More <span class="d-10-arrow"></span></a></div></div></div><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9669" style="-webkit-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-banner-bottom"><div class="demo-banner-bottom-wrapper"><div class="demo-text-wrapper"><p class="demo-p bottom">Visual Web Development Made Easy.</p></div><div class="demo-btn-wrapper"><a href="https://webflow.grsm.io/webdev-for-you-templates" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac966f" target="_blank" class="demo-btn f-1 w-inline-block"><div class="demo-btn-text f-1">Templates</div><div style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-btn-wrapper-block"></div></a><a href="https://www.youtube.com/c/webdevforyou" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9673" target="_blank" class="demo-btn f-2 w-inline-block"><div class="demo-btn-text f-1">Tutorials</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://webflow.grsm.io/interaction?interaction=WebDev-For-You-Daily-Interaction-10" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac967b" target="_blank" class="demo-btn f-2 w-inline-block"><div class="demo-btn-text f-1">Clone</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://bit.ly/learn-ui-design-course" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9677" target="_blank" class="demo-btn f-2 w-inline-block"><div class="demo-btn-text f-1">Learn UI Design</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://webflow.grsm.io/interaction?interaction=WebDev-For-You-Daily-Interaction-10" data-w-id="e403ab1d-986c-3e1d-25b5-3f58d48d301c" target="_blank" class="demo-btn f-2 w-inline-block"><div class="demo-btn-text f-1">Get Webflow</div><div class="demo-btn-wrapper-block f-2"></div></a></div></div><div class="demo-close-div"><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9680" class="d-50-circle-wrapper-2"><div class="close-line"></div><div class="close-line rotate"></div></div></div></div><div class="demo-left-arrow-wrapper"><a data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9684" href="https://webdev-for-you-daily-interaction-9.webflow.io/" class="demo-arrow-wrapper w-inline-block"><img src="https://assets.website-files.com/5c577e0f046430f4d4b28a6c/5c577e0f04643046abb28a76_Left-arrow.svg" width="20" alt="" class="image-3"/><div style="opacity:0;-webkit-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-arrow-text">Prev</div></a></div><div class="demo-right-arrow-wrapper"><a data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9689" href="https://webdev-for-you-daily-interaction-11.webflow.io/" class="demo-arrow-wrapper next w-inline-block"><div style="opacity:0;-webkit-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-arrow-text">Next</div><img src="https://assets.website-files.com/5c577e0f046430f4d4b28a6c/5c577e0f046430d8a4b28a78_Right-arrow.svg" width="20" alt="" class="image-3"/></a></div><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac968d" style="opacity:0;-webkit-transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-bottom-buttons"><a href="https://webflow.com?rfsn=1655335.42f776" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac968e" target="_blank" class="demo-btn f-2 bottom-btn w-inline-block"><div class="demo-btn-text f-1">Webflow</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://webflow.com/templates/designers/webdev-for-you" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9692" target="_blank" class="demo-btn f-2 bottom-btn w-inline-block"><div class="demo-btn-text f-1">Webflow Templates</div><div class="demo-btn-wrapper-block f-2"></div></a><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9696" class="demo-btn-close-wrapper"><div class="demo-btn-close-inner-wrapper"><div class="demo-btn-close-arrow"></div></div></div></div></div><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac9699" class="clone-instructions-panel"><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac969a" class="inner-wrapper"><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac969b" class="panel-text-wrapper"><h1 class="demo-heading h1 popup">Cloning Instructions </h1><h2 class="demo-heading h2 popup">To copy this project into your own project simply click on the &#x27;clone&#x27; button below.</h2><div class="separator popup"></div><p class="demo-p main popup">After the project is cloned you can copy the &#x27;d-10-row&#x27; to use the &#x27;product showcase with image reveal on load&#x27; animation.The animations are copied into the Webflow &#x27;Interactions (H)&#x27; panel.</p><div class="panel-button-wrapper"><a href="https://webflow.com/website/WebDev-For-You-Daily-Interaction-10?rfsn=1655335.42f776" data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac96a4" target="_blank" class="demo-btn f-1 w-inline-block"><div class="demo-btn-text f-1">Clone</div><div style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-btn-wrapper-block"></div></a></div></div><div data-w-id="e47e7d41-e82c-1da3-1e62-94e5d8ac96a8" class="demo-close-div popup"><div class="close-line popup"></div><div class="close-line rotate popup"></div></div></div></div></div>

16<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5b5666dd314bb9f305cf6956" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

16<script src="https://assets.website-files.com/5b5666dd314bb9f305cf6956/js/webflow.ae55562e8.js" type="text/javascript"></script>

16<!--[if lte IE 9]>

16<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>

16<![endif]-->

16<script type="text/javascript" src="https://transactions.sendowl.com/assets/sendowl.js" ></script>

16</body></html>