CSS and HTML Transition

Question

A website has an image (logo.png) at the top right of the site, next to a sequence of words.

When a mouse is hovered over the logo and the sequences of words, the words rotate and become white.

However, when I change the sequence of words to one with less words than the default, the logo shrinks in size.

I've peered over the CSS3 and HTML5 files and have not managed to solve this problem.

This is the html:

    <div class="navbar-header logo">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <h1>
                                <a class="navbar-brand link link--yaku" href="index.html"><span>C</span><span>O</span><span>N</span><span>S</span><span>O</span><span>R</span><span>T</span><span>I</span><span>U</span><span>M</span></a>
                            </h1>

                        </div>

This is the CSS3 code:

.logo a{
text-decoration:none;
}
.logo .link {
    outline: none;
    text-decoration: none;
    position: relative;
    font-size: 8em;
    line-height: 1;
    color: #fff;
    display: inline-block;
}
    .logo .link--yaku {
        color: #fff;
        font-weight: 600;
        font-size: 38px;
        overflow: hidden;
        padding: 12px 0 12px 50px;
        background: url(../images/logo.png) no-repeat 0px 18px;
        background-size: 15% !important;
    }
    .logo .link--yaku::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        -webkit-transform: translate3d(-101%,0,0);
        transform: translate3d(-101%,0,0);
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }
    .logo .link--yaku:hover::before {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .logo .link--yaku span {
        display: inline-block;
        position: relative;
        -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
        transform: perspective(1000px) rotate3d(0,1,0,0deg);
        -webkit-transition: -webkit-transform 0.5s, color 0.5s;
        transition: transform 0.5s, color 0.5s;
    }
    .logo .link--yaku:hover span {
        color: #fff;
        -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
        transform: perspective(1000px) rotate3d(0,1,0,360deg);
    }
    .logo .link--yaku span:nth-child(4),
    .logo .link--yaku:hover span:first-child {
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    .logo .link--yaku span:nth-child(3),
    .logo .link--yaku:hover span:nth-child(2) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }
    .logo .link--yaku span:nth-child(2),
    .logo .link--yaku:hover span:nth-child(3) {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .logo .link--yaku span:first-child,
    .logo .link--yaku:hover span:nth-child(4) {
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

Answer 1

You're using your logo as background-image and set the size of it to 15% of the elements horizontal width (background-size is always relative to the element, NOT relative to the used background-img's width). The vertical size is set to auto (background-size: 15% is equivalent to background-size: 15% auto) and will therefore scale with the width of the element.

Therefore, if the width of your element is reduced, the size of your background-image (horizontal as well as vertical) will adapt.

If you set your element, which has the logo as background-image, to a fixed width, the background-image won't resize. You could achieve this e.g. by

.logo .link--yaku {
  display: inline-block; //it's currently an inline element and would otherwise ignore the width property
  width: 316px;
}