Untitled

mail@pastecode.io avatar
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>