■マウスをのせるとやわらかく色が変わる 
p {
    background: #eee;
    transition: background .2s;
}

p:hover {
    background: #aaa;
}

■マウスをのせると画像が大きくなる 

img {
    width: 300px;
    transition: width .2s;
}

img:hover {
    width: 400px;
}
■文字列にマウスをのせると下線が広がる

こんにちは 

p {
    border-bottom: 1px solid #aaa;
    transition: border-bottom .2s;
}

p:hover {
    border-bottom: 5px solid #aaa;
}

■画像にマウスをのせると枠線がつく 

img {
    border: 5px solid #fff;
    transition: border .2s;
}

img:hover {
    border: 5px solid #aaa;
}
■スクロールしてもメニューが上部で動かない

<!-- 以下はHTMLに貼るコード --> 

<nav id="sticky">
    <var levels="1" expand="false" variant="standard" edit="1">
        navigation
    </var>
</nav>

<!-- ここまで -->

/* 以下はCSSに貼るコード */ 

#sticky {
        background: #eee; 
        position: fixed;
        top: 0; 
        width: 100vw; 
        z-index: 1000;
}

#sticky div div ul { 
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
}

#sticky div div ul li { 
        padding: .5em; 
        margin: 0 .5em;
        list-style-type: none;
        background: #ddd;
        transition: .5s;
}

#sticky div div ul li:hover {
        background: #aaa;
}

#sticky div div ul li a {
        text-decoration: none;
        transition: .5s;
}

#sticky div div ul li:hover a {
        color: white;
}

#container {
        margin-top: 80px;
}

/* ここまで */

■クレジット表示の中央寄せ 
#footer .leftrow {
    width: 100% !important;
}
#footer .leftrow p {
    text-align: center !important;
}