0

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

2 ответа 2

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 пропадает */
}
6
  • Это все понятно. Это азбука. Вопрос в том, что полупрозрачным является весь большой блок (на всю фоновую картинку), т.е. нужно либо менять прозрачность его части (полоса), либо делать отдельный полупрозрачный фон для блока с красными плашками(фикс ширины) и для широкой полупрозрачной подложки (ширина которой 100%), но как? Это же не Photoshop, здесь масок нет.
    – rebroff
    Commented 10 дек. 2014 в 13:20
  • Фоновая картинка отдельно (внешний контейнер), блоки с плашками отдельно поверх фоновой картинки по высоте внешнего блока. А вариант изменения background при наведении именно на плашку, а не на весь блок с плашкой вам написал @Deonis
    – MasterAlex
    Commented 10 дек. 2014 в 13:30
  • Наверное, у меня не получается внятно объяснить. Картинка с домами не имеет отношения к сути. Я о ней вообще не говорю. Есть полупрозрачный оверлей-блок А, который занимает всю ширину окна браузера. Есть блок фиксированной ширины- блок Б, который размещен по центру и который содержит 4 блока с красными плашками - блока В. При наведении на блок В я меняю его прозрачность на 100% - это понятно, но он же вместе со своим родителем, блоком Б, находится внутри большого (100% ширины окна) блока А, который тоже непрозрачен. Т.е. непрозрачно все пространство ширины окна, а не только блоки с фикс шир.
    – rebroff
    Commented 10 дек. 2014 в 13:38
  • 1
    Я вас понял, вам нужно сделать 3 колонки, где центральная колонка это блок с красными плашками, а левая и правая это такие же как плашки полупрозрачные уши, как вариант попробуйте вариант №7 для ваших ушей: htmlbook.ru/samlayout/tipovye-makety/…
    – MasterAlex
    Commented 10 дек. 2014 в 13:44
  • Да, спасибо, попробую.
    – rebroff
    Commented 10 дек. 2014 в 13:48
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;
}
8
  • Дело в том, что есть блок с плашками, а справа и слева от него - полупрозрачный фон. Т.е. залиты полупрозрачностью не только блоки-полоски, содержащие плашки, но и вся ширина окна браузера справа и слева.
    – rebroff
    Commented 10 дек. 2014 в 13:28
  • @rebroff, ну и пусть себе плашки с красными блоками будут посередине, а остальную часть оставьте как есть. Например, [вот так][1] мы получаем две плашки с красными блоками и реагирующими на :hover, а пространство по краям - курит в сторонке. Или я не могу понять в чем вы видите сложность. [1]:jsfiddle.net/bree6dr3/4
    – Deonis
    Commented 10 дек. 2014 в 13:42
  • @Deonis, я так понял плашки фиксированной ширины будут, ибо картинка
    – MasterAlex
    Commented 10 дек. 2014 в 13:45
  • @MasterAlex, нет, вы не правильно поняли. Они будут резиновыми и по высоте, и по ширине. Могли ж и сами проверить )
    – Deonis
    Commented 10 дек. 2014 в 13:47
  • @Deonis, думаю, что это вы неправильно поняли мои слова, у вас всё резиновое, дальше некуда, а вот у автора по ширине должны быть фиксированнные.
    – MasterAlex
    Commented 10 дек. 2014 в 13:50

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.