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