<div class="wrapper">
  
  <div class="logo logo--dark">
    <div class="logo__wrapper">
      
      <div class="logo__image" data-logo></div>
      <div class="logo--dark__image__wrapper">
        <div class="logo--dark__image" data-logo></div>
      </div>
      
    </div>
  </div>
  
  <div class="logo logo--white">
    <div class="logo__wrapper">
      
      <div class="logo__image" data-logo></div>
      <div class="logo--white__image__wrapper">
        <div class="logo--white__image" data-logo></div>
      </div>
      
    </div>
  </div>
  
</div>












<script type='text/template' id='logo-template'>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="233px" height="95px" viewBox="0 0 233 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="on-desktop-copy-2" transform="translate(-53.000000, -44.000000)" fill="#556C7B">
            <g id="logo" transform="translate(53.000000, 44.000000)">
                <g id="Page-1">
                    <polygon id="Fill-1" points="92.693002 31.7179271 63.4762061 2.33126042 91.7348796 30.7540729 35.2175327 30.7540729 33.2993082 32.6817813 91.7348796 32.6817813"></polygon>
                    <polygon id="Fill-3" points="61.1567184 63.4376354 63.0749429 61.5099271 4.63937143 61.5099271 3.67926939 62.4737813 12.9200041 71.7679479 4.63937143 63.4376354"></polygon>
                    <polygon id="Fill-5" points="63.074349 1.92790625 61.1561245 1.92790625 32.897451 30.3507187 33.2993082 30.7544687 35.2175327 30.7544687 63.4762061 2.33165625"></polygon>
                    <polygon id="Fill-6" points="0.9603 62.4725937 10.0644429 71.6341562 1.91644286 61.5087396"></polygon>
                    <polygon id="Fill-8" points="32.4969796 94.1930938 33.2987143 94.1930938 10.0642449 71.6305938"></polygon>
                    <polygon id="Fill-11" points="61.1563224 63.4380312 32.897649 91.8588646 12.9196082 71.7663646 33.2975265 92.2665729 35.215751 92.2665729 63.4744245 63.8398021 63.0745469 63.4380312"></polygon>
                    <polygon id="Fill-12" points="1.91703673 61.5089375 10.0670163 71.6343542 33.2995061 94.1928958 35.215751 92.2651875 33.2995061 92.2651875 12.9196082 71.7669583 3.67887347 62.4727917 4.63699592 61.5089375"></polygon>
                    <polygon id="Fill-13" points="1.91881837 61.5089375 4.63877755 61.5089375 33.2993082 32.682375 32.4955939 32.682375 31.5374714 31.7185208"></polygon>
                    <polygon id="Fill-14" points="63.4760082 63.8405937 91.7346816 92.2653854 35.2173347 92.2653854 33.2991102 94.1930937 96.3728653 94.1930937 64.8359878 62.4729896"></polygon>
                    <polygon id="Fill-15" points="33.2993082 32.682375 35.2175327 30.7546667 33.2993082 30.7546667 32.897451 30.3509167 31.5374714 31.7185208 32.4955939 32.682375"></polygon>
                    <polygon id="Fill-16" points="0 0.00059375 31.5368776 31.7167396 32.8968571 30.3511146 4.64016327 1.92830208 61.1555306 1.92830208 63.0757347 0.00059375"></polygon>
                    <polygon id="Fill-17" points="63.074349 61.5087396 61.1561245 63.4364479 63.074349 63.4364479 63.4762061 63.8421771 64.8361857 62.4725937 63.8760837 61.5087396"></polygon>
                    <polygon id="Fill-18" points="63.074349 61.5087396 63.8760837 61.5087396 64.8361857 62.4725938 94.4548388 32.6821771 91.7348796 32.6821771"></polygon>
                    <polygon id="Fill-19" points="63.0751408 0.00059375 61.1569163 1.92830208 63.0751408 1.92830208 63.4750184 2.33205208 92.6937939 31.7167396 91.7336918 32.6825729 94.453651 32.6825729 95.4137531 31.7167396 63.8748959 0.00059375"></polygon>
                </g>
                <text id="Z24" font-family="Roboto-Bold, Roboto" font-size="21" font-weight="bold">
                    <tspan x="121" y="49">Z24</tspan>
                </text>
                <text id="Spare-parts-&amp;-Servic" font-family="Roboto-Light, Roboto" font-size="12" font-weight="300">
                    <tspan x="120" y="67">Spare parts &amp; Service</tspan>
                </text>
            </g>
        </g>
    </g>
</svg>
</script>
$hoverHeight: 30px
$logoHeight: 100px

$dur: .7s
$ease: ease-in-out

$padding: 40px

$bgc: #292c31
$color: #607785
$mainColor: #47988b
$logoWhiteOnHoverColor: #beced6

$cssTransition: false

.wrapper
  margin: 200px auto
  width: 650px
  display: flex
  justify-content: space-between
  
.logo
  overflow: hidden
  padding: $padding
  cursor: pointer
  &__wrapper
    position: relative
      
  &--white
    background-color: #fff
    .logo__image svg
      transition: opacity .15s $ease
    
    &__image
      @if $cssTransition == true
        transition: transform $dur $ease
      *
        fill: $mainColor !important
      &__wrapper
        position: absolute
        left: 0
        top: 0
        height: $hoverHeight
        opacity: 0
        overflow: hidden
        @if $cssTransition == true
          transition: top $dur $ease, opacity .15s $ease
        @else
          transition: opacity .15s $ease
    .logo__wrapper  
      overflow: hidden   
      &:hover
        .logo--white__image__wrapper
          opacity: 1
        .logo__image svg
          opacity: 0.5
        
      
  &--dark
    background-color: $bgc
    .logo__wrapper  
      overflow: hidden
    .logo__image
      opacity: 0.6
    &__image
      @if $cssTransition == true
        transition: transform $dur $ease
      *
        fill: #fff !important
      &__wrapper
        position: absolute
        left: 0
        top: 0
        height: $hoverHeight
        opacity: 0
        overflow: hidden
        @if $cssTransition == true
          transition: top $dur $ease, opacity .15s $ease
        @else
          transition: opacity .15s $ease
        
    @if $cssTransition == true  
      &:hover
        .logo--dark__image__wrapper
          opacity: 1
          top: $logoHeight
        .logo--dark__image
          transform: translateY(-$logoHeight)
    @else
      &:hover
        .logo--dark__image__wrapper
          opacity: 1
      

      
      
      
      
    
  
View Compiled
// Here is three modes:
// By mouse move, mouse enter-leave
// & css hover
// Just change byMouseMove to false
// or disable js by return above all the code
// and set sass variable $cssTransition to true

// return;

const dur = .7;
const ease = Cubic.easeOut;
const byMouseMove = true;


const template = () => {
  return $('#logo-template').html();
};
const $logos = $('[data-logo]');
const logoHeight = $logos.html(template()).height();

const $logoDarkBlock = $('.logo--dark').find('.logo__wrapper');
const $logoDark = $('.logo--dark__image');
const $logoDarkWrapper = $('.logo--dark__image__wrapper');

const $logoWhiteBlock = $('.logo--white').find('.logo__wrapper');
const $logoWhite = $('.logo--white__image');
const $logoWhiteWrapper = $('.logo--white__image__wrapper');

const moveLogo = ({logo, wrapper}, {logoBlock, logoWrapper}) => {
  TweenMax.to(logoBlock[0], dur, {
    y: logo,
    ease
  });
  
  TweenMax.to(logoWrapper[0], dur, {
    y: wrapper,
    ease
  });
};

const values = {
  enter: {
    logo: -logoHeight,
    wrapper: logoHeight
  },
  leave: {
    logo: 0,
    wrapper: 0
  }
}

const BindAnimation = ($logo, $wrapper) => {
  return {
    'mouseenter': () => {
      if (byMouseMove) return;
      moveLogo(values.enter);
    },
    'mouseleave': () => {
      if (byMouseMove) return;
      moveLogo(values.leave);
    },
    'mousemove': function(e) {
      if (!byMouseMove) return;
      const offsetTop = this.offsetTop;
      const y = e.pageY - offsetTop;

      moveLogo({
        logo: -y,
        wrapper: y
      }, {
        logoBlock: $logo,
        logoWrapper: $wrapper
      })
    }
  }
};

$logoDarkBlock.on(BindAnimation($logoDark, $logoDarkWrapper));
$logoWhiteBlock.on(BindAnimation($logoWhite, $logoWhiteWrapper));

View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js