<!doctype html>
<html>
<body>
<div class="container">
<div class="row">
<div class="truck">
<svg viewBox="0 0 47 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="47" height="29.9" style="fill:none;"/><clipPath id="_clip1"><rect x="0" y="0" width="47" height="29.9"/></clipPath><g clip-path="url(#_clip1)"><g><path d="M17.9,4.3l0,-1.9c0,-0.3 0.2,-0.5 0.5,-0.5c0.3,0 0.5,0.2 0.5,0.5l0,6.4l-4.6,0l3.6,-4.5Z" style="fill-rule:nonzero;"/><path d="M4.1,8c0.3,0 0.5,0.2 0.5,0.5c0,0.3 -0.2,0.5 -0.5,0.5c-1.7,0 -3.1,1.4 -3.1,3.1c0,0.3 -0.2,0.5 -0.5,0.5c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-2.3 1.8,-4.1 4.1,-4.1Z" style="fill-rule:nonzero;"/><path d="M32.4,3.1c-0.8,-1 -1.9,-1.5 -3.1,-1.5c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-0.3 0.2,-0.5 0.5,-0.5c1.5,0 2.9,0.7 3.9,1.9c0.2,0.2 0.1,0.5 -0.1,0.7c-0.2,0.1 -0.5,0.1 -0.7,-0.1Z" style="fill-rule:nonzero;"/><path d="M46,12.5c0.3,-0.1 0.5,0 0.6,0.3c0.3,0.8 0.4,1.5 0.4,2.3c0,0.3 -0.2,0.5 -0.5,0.5c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-0.7 -0.1,-1.4 -0.3,-2c-0.1,-0.2 0,-0.5 0.3,-0.6Z" style="fill-rule:nonzero;"/><path d="M4.1,9.8l16.9,0l0,-5.1c0,-1.2 1,-2.3 2.3,-2.3l6,0c1,0 1.9,0.4 2.5,1.2l3.7,4.6c0.3,0.4 0.7,0.6 1.2,0.8c1.5,0.7 8.5,0.5 8.5,6.2l0,2.7c0,1.2 -1,2.3 -2.3,2.3l-0.7,0c0,-0.1 0,-0.1 -0.1,-0.2c0.8,-1 -0.1,-2.5 -1.4,-2.4c-0.3,-0.4 -0.6,-0.7 -1,-1c0.2,-1.3 -1.4,-2.2 -2.4,-1.4c-0.4,-0.2 -0.9,-0.3 -1.3,-0.4c-0.5,-1.2 -2.3,-1.2 -2.8,0c-0.5,0.1 -0.9,0.2 -1.3,0.4c-1,-0.8 -2.6,0 -2.4,1.4c-0.4,0.3 -0.7,0.6 -1,1c-1.3,-0.2 -2.2,1.3 -1.4,2.4c0,0.1 0,0.1 -0.1,0.2l-7,0c0,-0.1 0,-0.1 -0.1,-0.2c0.8,-1.1 -0.1,-2.5 -1.4,-2.4c-0.3,-0.4 -0.6,-0.7 -1,-1c0.2,-1.3 -1.3,-2.2 -2.4,-1.4c-0.4,-0.2 -0.9,-0.3 -1.3,-0.4c-0.5,-1.2 -2.3,-1.2 -2.8,0c-0.5,0.1 -0.9,0.2 -1.3,0.4c-1.1,-0.8 -2.6,0 -2.4,1.4c-0.4,0.3 -0.7,0.6 -1,1c-1.3,-0.2 -2.2,1.3 -1.4,2.4c0,0.1 0,0.1 -0.1,0.2l-0.7,0c-1.3,0 -2.3,-1 -2.3,-2.3l0,-5.8c0,-1.2 1,-2.3 2.3,-2.3Zm38.6,5.2l1.5,0c0,-0.2 0,-0.6 -0.1,-1l-1.3,0c-0.3,0 -0.5,0.2 -0.5,0.5c-0.1,0.3 0.1,0.5 0.4,0.5Zm-18,-1.9l1.3,0c0.3,0 0.5,-0.2 0.5,-0.5c0,-0.3 -0.2,-0.5 -0.5,-0.5l-1.3,0c-0.3,0 -0.5,0.2 -0.5,0.5c0,0.2 0.2,0.5 0.5,0.5Zm-1.4,-2.7l8,0l1.6,-1.8l-2.9,-3.6c-0.2,-0.2 -0.4,-0.3 -0.7,-0.3l-6,0l0,5.7Zm-20.5,2.9l1,0c0.7,0 1.3,-0.6 1.3,-1.3l0,-1.2l-1,0c-0.6,0 -1.3,0.5 -1.3,1.3l0,1.2Z" style="fill-rule:nonzero;"/><path d="M6.3,9l-0.8,0c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-0.3 0.3,-0.5 0.6,-0.5l0.8,0c0.3,0 0.5,0.2 0.5,0.5c0,0.3 -0.3,0.5 -0.6,0.5Z" style="fill-rule:nonzero;"/><path d="M8.7,9l-0.8,0c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-0.3 0.2,-0.5 0.5,-0.5l0.8,0c0.3,0 0.5,0.2 0.5,0.5c0,0.3 -0.3,0.5 -0.5,0.5Z" style="fill-rule:nonzero;"/><path d="M11,9l-0.8,0c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-0.3 0.3,-0.5 0.5,-0.5l0.8,0c0.3,0 0.5,0.2 0.5,0.5c0,0.3 -0.2,0.5 -0.5,0.5Z" style="fill-rule:nonzero;"/><path d="M5.1,22.1l0.3,0c0.1,-0.9 0.3,-1.8 0.7,-2.6l-0.3,-0.2c-0.2,-0.1 -0.3,-0.4 -0.2,-0.7c0.1,-0.2 0.4,-0.3 0.7,-0.2l0.3,0.2c0.5,-0.7 1.1,-1.4 1.9,-1.9l-0.2,-0.3c-0.1,-0.2 -0.1,-0.5 0.2,-0.7c0.2,-0.1 0.5,-0.1 0.7,0.2l0.2,0.3c0.8,-0.4 1.6,-0.6 2.5,-0.7l0,-0.3c0,-0.3 0.2,-0.5 0.5,-0.5c0.3,0 0.5,0.2 0.5,0.5l0,0.3c0.9,0.1 1.8,0.3 2.5,0.7l0.2,-0.3c0.1,-0.2 0.4,-0.3 0.7,-0.2c0.2,0.1 0.3,0.4 0.2,0.7l-0.2,0.3c0.7,0.5 1.4,1.1 1.9,1.9l0.3,-0.1c0.2,-0.1 0.5,-0.1 0.7,0.2c0.1,0.2 0.1,0.5 -0.2,0.7l-0.3,0.1c0.4,0.8 0.6,1.6 0.7,2.6l0.3,0c0.3,0 0.5,0.2 0.5,0.5c0,0.3 -0.2,0.5 -0.5,0.5l-0.3,0c-0.1,0.9 -0.3,1.8 -0.7,2.5l0.3,0.2c0.2,0.1 0.3,0.4 0.2,0.7c-0.1,0.2 -0.4,0.3 -0.7,0.2l-0.2,-0.1c-0.5,0.7 -1.1,1.4 -1.9,1.9l0.2,0.3c0.1,0.2 0.1,0.5 -0.2,0.7c-0.2,0.1 -0.5,0.1 -0.7,-0.2l-0.2,-0.3c-0.8,0.4 -1.6,0.6 -2.5,0.7l0,0.3c0,0.3 -0.2,0.5 -0.5,0.5c-0.3,0 -0.5,-0.2 -0.5,-0.5l0,-0.3c-0.9,-0.1 -1.8,-0.3 -2.5,-0.7l-0.2,0.3c-0.1,0.2 -0.4,0.3 -0.7,0.2c-0.2,-0.1 -0.3,-0.4 -0.2,-0.7l0.2,-0.3c-0.7,-0.5 -1.4,-1.1 -1.9,-1.9l-0.3,0.2c-0.2,0.1 -0.5,0.1 -0.7,-0.2c-0.1,-0.2 -0.1,-0.5 0.2,-0.7l0.3,-0.2c-0.4,-0.8 -0.6,-1.6 -0.7,-2.6l-0.3,0c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-0.3 0.2,-0.5 0.4,-0.5Zm7.3,3.8c1.8,0 3.3,-1.5 3.3,-3.3c0,-1.8 -1.5,-3.3 -3.3,-3.3c-1.8,0 -3.3,1.5 -3.3,3.3c0,1.9 1.5,3.3 3.3,3.3Z" style="fill-rule:nonzero;"/><circle cx="12.4" cy="22.6" r="2.3"/><path d="M27.3,22.1l0.3,0c0.1,-0.9 0.3,-1.8 0.7,-2.6l-0.3,-0.2c-0.2,-0.1 -0.3,-0.4 -0.2,-0.7c0.1,-0.2 0.4,-0.3 0.7,-0.2l0.3,0.2c0.5,-0.7 1.1,-1.4 1.9,-1.9l-0.2,-0.3c-0.1,-0.2 -0.1,-0.5 0.2,-0.7c0.2,-0.1 0.5,-0.1 0.7,0.2l0.2,0.3c0.8,-0.4 1.6,-0.6 2.5,-0.7l0,-0.3c0,-0.3 0.2,-0.5 0.5,-0.5c0.3,0 0.5,0.2 0.5,0.5l0,0.3c0.9,0.1 1.8,0.3 2.5,0.7l0.2,-0.3c0.1,-0.2 0.4,-0.3 0.7,-0.2c0.2,0.1 0.3,0.4 0.2,0.7l-0.2,0.3c0.7,0.5 1.4,1.1 1.9,1.9l0.3,-0.1c0.2,-0.1 0.5,-0.1 0.7,0.2c0.1,0.2 0.1,0.5 -0.2,0.7l-0.3,0.1c0.4,0.8 0.6,1.6 0.7,2.6l0.2,0c0.3,0 0.5,0.2 0.5,0.5c0,0.3 -0.2,0.5 -0.5,0.5l-0.3,0c-0.1,0.9 -0.3,1.8 -0.7,2.5l0.3,0.1c0.2,0.1 0.3,0.4 0.2,0.7c-0.1,0.2 -0.4,0.3 -0.7,0.2l-0.3,-0.1c-0.5,0.7 -1.1,1.4 -1.9,1.9l0.2,0.3c0.1,0.2 0.1,0.5 -0.2,0.7c-0.2,0.1 -0.5,0.1 -0.7,-0.2l-0.2,-0.3c-0.8,0.4 -1.6,0.6 -2.5,0.7l0,0.3c0,0.3 -0.2,0.5 -0.5,0.5c-0.3,0 -0.5,-0.2 -0.5,-0.5l0,-0.3c-0.9,-0.1 -1.8,-0.3 -2.5,-0.7l-0.2,0.3c-0.1,0.2 -0.4,0.3 -0.7,0.2c-0.2,-0.1 -0.3,-0.4 -0.2,-0.7l0.2,-0.3c-0.7,-0.5 -1.4,-1.1 -1.9,-1.9l-0.3,0.2c-0.2,0.1 -0.5,0.1 -0.7,-0.2c-0.1,-0.2 -0.1,-0.5 0.2,-0.7l0.3,-0.2c-0.4,-0.8 -0.6,-1.6 -0.7,-2.6l-0.3,0c-0.3,0 -0.5,-0.2 -0.5,-0.5c0,-0.3 0.3,-0.4 0.6,-0.4Zm7.3,3.8c1.8,0 3.3,-1.5 3.3,-3.3c0,-1.8 -1.5,-3.3 -3.3,-3.3c-1.8,0 -3.3,1.5 -3.3,3.3c-0.1,1.9 1.4,3.3 3.3,3.3Z" style="fill-rule:nonzero;"/><circle cx="34.6" cy="22.6" r="2.3"/></svg>
</div>
<svg class="man" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M167.422,59.806c-3.849,6.146 -6.081,13.408 -6.081,21.194c0,22.091 17.909,40 40,40c22.091,0 40,-17.909 40,-40c0,-1.646 -0.111,-3.265 -0.304,-4.859c8.456,-0.906 14.013,-3.331 14.831,-7.129c1.039,-4.829 -5.821,-10.785 -17.249,-16.04c0.343,-0.912 0.64,-1.851 0.851,-2.832l2.104,-9.776c0.144,-0.668 0.251,-1.335 0.326,-2c1.131,-10.083 -5.541,-19.58 -15.672,-21.759l-19.553,-4.207c-10.131,-2.18 -20.119,3.733 -23.233,13.389c-0.206,0.636 -0.382,1.29 -0.526,1.957l-2.104,9.776c-0.211,0.981 -0.327,1.959 -0.389,2.931c-12.578,0.089 -21.28,2.698 -22.319,7.526c-0.769,3.573 2.789,7.763 9.318,11.829Z" style="fill-rule:nonzero;"/><path d="M393.364,155.079c-1.439,-2.489 -2.845,-4.036 -4.091,-5.295c-2.426,-2.374 -4.452,-3.729 -6.521,-5.053c-3.838,-2.388 -7.869,-4.352 -12.501,-6.43c-8.048,-3.584 -17.751,-7.28 -28.027,-10.95c-16.981,-6.055 -35.456,-11.973 -48.627,-16.069c-10.579,-12.141 -28.96,-13.791 -41.541,-3.547c-10.617,8.645 -13.771,23.045 -8.648,35.037c-0.137,0.395 -0.27,0.786 -0.417,1.187c-3.832,10.348 -10.903,22.787 -25.438,34.383c-13.617,10.854 -29.076,17.783 -41.021,21.801c-5.965,2.016 -11.033,3.318 -14.496,4.094c-1.731,0.388 -3.063,0.646 -3.904,0.798c-0.421,0.074 -0.718,0.124 -0.885,0.151c-0.054,0.009 -0.094,0.015 -0.12,0.02c-10.916,1.584 -18.491,11.708 -16.924,22.631c0.216,1.511 0.614,2.949 1.138,4.317c-3.792,1.104 -7.149,2.92 -9.827,5.156c-6.483,5.406 -9.278,12.234 -10.807,17.411c-1.493,5.234 -1.667,9.152 -1.698,9.668l-0.009,0.233l0,227.378c0,5.522 4.476,9.998 10,9.998c5.522,0 10,-4.476 10,-9.998l0,-226.938c0.084,-1.075 0.684,-5.3 2.335,-8.487c0.876,-1.755 1.95,-3.123 3.098,-3.987c1.182,-0.851 2.408,-1.463 4.97,-1.603c0.425,-0.019 0.834,-0.028 1.224,-0.028c4.527,0.023 7.019,1 8.741,2.063c2.505,1.569 3.945,4.07 4.809,6.75c0.415,1.298 0.635,2.536 0.735,3.368c0.051,0.415 0.074,0.729 0.083,0.898c0.004,0.082 0.006,0.131 0.006,0.137c0.063,5.471 4.52,9.885 10.006,9.883c5.522,-0.005 9.996,-4.485 9.992,-10.007c-0.055,-0.875 0.053,-7.97 -4.209,-16.211c-1.042,-1.986 -2.398,-4.042 -4.101,-6.006c3.671,-0.962 7.938,-2.204 12.642,-3.791c15.009,-5.088 34.55,-13.658 53.113,-28.385c20.836,-16.522 32.274,-35.9 38.105,-51.933c3.053,-8.357 4.669,-15.802 5.525,-21.726c0.122,0.155 0.238,0.319 0.354,0.482c0.096,0.133 0.193,0.262 0.285,0.401c0.134,0.203 0.259,0.418 0.385,0.633c0.076,0.131 0.155,0.258 0.229,0.393c0.128,0.235 0.248,0.481 0.366,0.729c0.06,0.126 0.122,0.25 0.181,0.378c0.12,0.269 0.232,0.548 0.342,0.831c0.046,0.118 0.093,0.233 0.137,0.353c0.111,0.304 0.215,0.618 0.314,0.937c0.033,0.107 0.068,0.212 0.1,0.321c0.101,0.34 0.193,0.688 0.28,1.043c0.023,0.095 0.047,0.189 0.069,0.285c0.088,0.375 0.167,0.76 0.24,1.151c0.015,0.081 0.03,0.161 0.045,0.242c0.073,0.412 0.139,0.832 0.195,1.26c0.01,0.066 0.019,0.133 0.026,0.199c0.058,0.448 0.106,0.904 0.147,1.368c0.004,0.049 0.008,0.099 0.012,0.148c0.041,0.484 0.072,0.977 0.094,1.479c0.002,0.032 0.003,0.064 0.004,0.096c0.021,0.519 0.034,1.047 0.036,1.584c0.001,0.016 0,0.032 0,0.048c0.002,0.553 -0.006,1.114 -0.024,1.685c-0.328,10.063 -3.811,22.805 -10.316,35.609c-1.106,2.177 -2.265,4.278 -3.461,6.304c6.152,11.557 12.078,24.551 16.425,37.797c4.675,14.163 7.48,28.534 7.46,41.552l0,0.525c-0.115,20.446 -0.153,49.249 -0.155,78.613c0.002,58.714 0.155,119.617 0.155,119.63c0.04,16.543 13.462,29.926 29.997,29.926l0.078,0c16.566,-0.042 29.966,-13.507 29.924,-30.075c0,-0.039 -0.038,-15.21 -0.076,-37.754c-0.038,-22.547 -0.076,-52.421 -0.076,-81.727c0,-13.019 0.008,-25.924 0.026,-38.026c6.047,-9.362 10.128,-24.963 10.128,-32.417l-10,-42c0,-1.163 -0.104,-2.185 -0.295,-3.095c3.059,-3.187 6.359,-6.751 9.697,-10.574c6.31,-7.252 12.761,-15.375 18.07,-24.11c2.651,-4.388 5.031,-8.938 6.899,-13.882c1.838,-4.946 3.258,-10.334 3.285,-16.594c0.027,-5.21 -1.157,-11.216 -4.292,-16.666Zm-40.742,19.164c1.311,0.568 2.532,1.121 3.632,1.639c-1.187,2.612 -3.13,6.11 -5.646,9.712c-2.203,3.233 -4.791,6.606 -7.527,9.931c-4.477,-10.993 -9.428,-21.24 -14.409,-30.54c9.105,3.248 17.601,6.488 23.95,9.258Z" style="fill-rule:nonzero;"/></svg>
</div>
</div>
<img class="logo" src="https://cdn.weareferal.com/assets/uploads/pages/feral_logo_master.png">
<p class='instructions'>Hover your cursor to start the transition</p>
</body>
</html>
.container {
box-sizing: border-box;
position: fixed;
padding: 0 10%;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.container:hover .truck{
transition: transform 1s ease-in;
transform: translate3d(calc(100% - 155px), 0, 0);
}
.row {
width: 100%;
height: 100px;
display: flex;
align-items: flex-end;
margin-top: -75px;
}
.truck {
height: 100%;
flex-grow: 1;
padding-left: 155px;
}
.truck svg {
width: 155px;
transform: translate3d(-100%, 0, 0);
}
.man {
height: 50%;
}
.instructions {
font-size: 14px;
line-height: 1;
font-style: italic;
color: #ccc;
text-align: center;
position: absolute;
top: 25px;
width: 100%;
}
.logo {
width: 150px;
position: absolute;
bottom: 25px;
left: 25px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.