Untitled
unknown
plain_text
a year ago
4.6 kB
2
Indexable
Never
<html> <div class="container fullContainer noTopMargin padding20-top padding20-bottom padding40H noBorder borderSolid border3px cornersAll radius0 shadow0 bgNoRepeat emptySection containerWithVisibleOverflow" id="section--88947" data-title="Section" data-block-color="0074C7" style="padding-top: 20px; padding-bottom: 20px; background-color: rgb(255, 255, 255); outline: none;" data-trigger="none" data-animate="fade" data-delay="500"> <div class="containerInner ui-sortable"> <div class="row bgCover noBorder borderSolid border3px cornersAll radius0 shadow0 P0-top P0-bottom P0H noTopMargin" id="row--84664" data-trigger="none" data-animate="fade" data-delay="500" data-title="3 column row" style="padding-top: 20px; padding-bottom: 20px; margin: 0px; outline: none;" data-hide-on="desktop"> <div id="col-left-146" class="col-md-4 innerContent col_left ui-resizable" data-col="left" data-trigger="none" data-animate="fade" data-delay="500" data-title="1st column" style="outline: none;"> <div class="col-inner bgCover noBorder borderSolid border3px cornersAll radius0 shadow0 P0-top P0-bottom P0H noTopMargin" style="padding: 0 10px"><div class="de elImageWrapper de-image-block elAlign_center elMargin0 ui-droppable de-editable" id="tmp_image-46139" data-de-type="img" data-de-editing="false" data-title="image-scroll" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer;" aria-disabled="false"> <img src="//alexktaylor.com/hosted/images/59/592892e83c46a6925682bcb10f6f00/fullscreen1.png" class="elIMG ximg" alt data-lazy-loading="false"> </div></div> </div> <div id="col-center-159" class="col-md-4 innerContent col_right ui-resizable" data-col="center" data-trigger="none" data-animate="fade" data-delay="500" data-title="2nd column" style="outline: none;"> <div class="col-inner bgCover noBorder borderSolid border3px cornersAll radius0 shadow0 P0-top P0-bottom P0H noTopMargin" style="padding: 0 10px"> <div class="de elImageWrapper de-image-block elAlign_center elMargin0 ui-droppable de-editable" id="tmp_image-78994" data-de-type="img" data-de-editing="false" data-title="image-scroll" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer;" aria-disabled="false"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="elIMG ximg" alt data-src="//alexktaylor.com/hosted/images/e6/387ae7ed77420c87b09ba4f0ca81dc/InXpressLong.png"> </div> </div> </div> <div id="col-right-129" class="col-md-4 innerContent col_right ui-resizable" data-col="right" data-trigger="none" data-animate="fade" data-delay="500" data-title="3rd Column" style="outline: none;"> <div class="col-inner bgCover noBorder borderSolid border3px cornersAll radius0 shadow0 P0-top P0-bottom P0H noTopMargin" style="padding: 0 10px"> <div class="de elImageWrapper de-image-block elAlign_center elMargin0 ui-droppable de-editable" id="tmp_image-24844" data-de-type="img" data-de-editing="false" data-title="image-scroll" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer;" aria-disabled="false"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="elIMG ximg" alt data-src="//alexktaylor.com/hosted/images/d3/710ddcb3084b2e9255a63160e745b8/sigurdlone1.png"> </div> </div> </div> </div> </html> <style> div[data-title='image-scroll'] { width: 100%; height: 600px; overflow: hidden; -webkit-box-shadow: 0px 25px 50px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 25px 50px 0px rgba(0,0,0,0.2); box-shadow: 0px 25px 50px 0px rgba(0,0,0,0.2); } div[data-title='image-scroll'] img { object-fit: cover; width:100%; transform: translateY(0); transition: 3s ease-out; /* How long it takes to go back to top */ } div[data-title='image-scroll']:hover img { object-fit: cover; width:100%; /* Considering frame height */ transform: translateY(calc(-100% + 600px)); transition: 5s ease-out; /* How long it takes to scroll down */ } div[data-title='image-scroll'] { width: 100%; height: 600px; overflow: hidden; } div[data-title='image-scroll'] img { object-fit: cover; width:100%; transform: translateY(0); transition: 1s ease-out; /* How long it takes to go back to top */ } div[data-title='image-scroll']:hover img { object-fit: cover; width:100%; /* Considering frame height */ transform: translateY(calc(-100% + 600px)); transition: 11s ease-out; /* How long it takes to scroll down */ } </style>