Изменение прозрачности отдельного участка блока

Рейтинг: 0Ответов: 2Опубликовано: 10.12.2014

Здравствуйте. Подскажите, как реализовать нечто подобное. См. картинку. При наведении на красный блок, вертикальная полоса под ним меняет прозрачность. Проблема в том, что полупрозрачный фон занимает 100% ширины окна. alt text Благодарю за советы.

css javascript jquery css3
Источник: Stack Overflow на русском

Ответы

▲ 1

В css можно прописывать background для блока в формате RGBA, то есть учитывать не только цвет background, но и его прозрачность. И эта прозрачность не будет влиять на содержимое в отличии от параметра opacity.

В css у вас получаются вот такие стили:

.container-item {
  background-color: rgba(255,255,255,0.4); /* 255, 255, 255 это белый цвет в RGB, 0.4 полупрозрачность 40%, методом тыка можно подобрать нужную */
  transition: background 0.3s linear; /* Для более плавного изменения прозрачности можно добавить transition */
}

.container-item:hover {
  background-color: rgba(255,255,255,0); /* Background пропадает */
}
▲ 1

@rebroff, если нужно проявлять полосу при наведении именно на розовый блок, то тут нужно подключать JS. А если достаточно наведения на саму полоску, то можно сделать таким образом:

#wrapper {
    display: flex;
    height: 100vh;
}
#wrapper > div {
    flex: 1 0 auto;
    text-align: center;
    border: 1px solid #999;
    background: rgba(255, 255, 255, .5);
}
#wrapper > div:hover {
    background: rgba(255, 255, 255, 0);
}
#wrapper > div:before {
    display: inline-block;
    height: 100%;
    content:'';
    vertical-align: middle;
}
.red { /* ваши розовые блоки */
    display: inline-block;
    width: 90%;
    height: 200px;
    background: #de4f4f;
    vertical-align: middle;
}