Цвет фона при наведении

Question

Как они делали фоновый цвет при наведении на него таким, а не выглядели как прямоугольник в областях «о» и «тематическое исследование»?http://clorova.com/

Answer 1

Они используют изображение на :: до

  .flare-hover:before {
        content: '';
        position: absolute;
        width: 450px;
        height: 450px;
        background-image: url(../img/general/hover.png);
        background-size: cover;
        top: -200px;
        left: -100px;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;
        -webkit-transform: scale(0.4);
        -moz-transform: scale(0.4);
        -ms-transform: scale(0.4);
        -o-transform: scale(0.4);
        transform: scale(0.4);
    }

Answer 2

Они использовали изображение:

http://clorova.com/assets/img/general/hover.png

Если вы просто осмотрите страницу, вы увидите css:

.flare-hover:before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    background-image: url(../img/general/hover.png);
    background-size: cover;
    top: -200px;
    left: -100px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
}