Резюме
- Целевые устройства (Ширина устройства + 600px - Пожалуйста, игнорировать мобильные /xs экраны)
- Чистый CSS Отображение изображения с помощью
:hover:after
- Работает, но не идеально
- Проблемы:
- соотношение изображения (изображения будут 800 пикселей /600 пикселей) не поддерживается - ширина обрезается, а изображение уменьшается.
- Изображения находятся за пределами основного контейнера
.outercontainer
- затухание изображения на
:hover
работает, но после:hover
<< terminated Я попытался использовать отдельную анимацию/ту же анимацию назад, не повезло
Желаемый эффект:
-
Все вставляется внутри контейнера с синей рамкой, помеченной
.outercontainer
-
Изменить: Изображения должны иметь собственное пространство - около 80% контейнера ширина и опции/меню будут другими 20% - Нет перекрытия (если изображения перекрываются над опциями, пользователи планшета будут застревать в состоянии зависания)
-
.outercontainer
, и каждый из них настраивается в соответствии с экраном Ширина -
Минимальная желаемая ширина устройства для поддержки составляет 600 пикселей (игнорировать экраны размером менее 600 пикселей)
-
Действия:
- Изображения Затухание в
:hover
- Изображения остаются видимыми до тех пор, пока элемет все еще находится в
:hover
- Затухание изображений после того, как элемент "не завис"
- Изображения Затухание в
Похожие сообщения/проблемы
-
Увеличить изображение внутри div вверх и/или вниз, чтобы соответствовать самой большой стороне изображения с помощью CSS (обращается к изображению как к элементу, а не как фон псевдоэлемент)
-
не может получить изображение для размещения внутри div (так же, как ссылка выше)
-
Масштабировать все изображения, чтобы они соответствовали контейнеру пропорционально (Подписывает изображение как фон элемента, в отличие от него, являющийся фоном : после псевдоэлемента)
В SO есть еще много вопросов. Я не нашел тот, который обращается к изображению, являющемуся фоном: после псевдоэлемента
Мои вопросы
-
Как мне поместить изображение, отображаемое с помощью: hover: после внутри родительского контейнера? (Я бы хотел, чтобы он занимал не более 80% -85% от ширины этого контейнера - остальная часть пространства должна быть отнесена к параметрам/пунктам меню/списка)
-
Как я могу сделать изображение, отображаемое с помощью: hover: после реагирования?
-
Как я могу сделать элемент затухающим после того, как его не запустили?
Мои CSS
и HTML
находятся в фрагменте ниже (не полностью resposive - открываются в полноэкранном режиме)
/* Start Miscellaneous stuff */
body {
background: #131418;
color: #999;
text-align: center;
}
.optionlist a {
color: #999;
text-decoration: none;
}
@keyframes mycoolfade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* End Miscellaneous stuff */
.outercontainer {
border: 1px solid blue; /*This needs to be in the middle of the screen and everthing should fit inside it*/
position: fixed; /*border to highlight only - not part of final product*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1200px;
max-width: 80%
}
.optioncontainer {
width: 250px;
max-width: 20vw;
}
.optionlist li {
background: #fff;
padding: .5em;
box-shadow: inset 10px 10px 100px 25px rgba(0, 0, 0, .8);
list-style-type: none;
}
.optionlist li:nth-child(odd) {
background: #000;
}
.optionlist li:hover {
background: red;
}
.optionlist li:hover:after { /* The part the needs to be fixed */
content: '';
width: 800px;
height: 600px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: mycoolfade 1s;
}
/* Start Background Control */
#red:after {background: url(http://lorempixel.com/800/600/)}
#blue:after {background: url(http://lorempixel.com/800/601/)}
#green:after {background: url(http://lorempixel.com/801/600/)}
#yellow:after {background: url(http://lorempixel.com/801/601/)}
#orange:after {background: url(http://lorempixel.com/799/600/)}
#white:after {background: url(http://lorempixel.com/800/599/)}
#black:after {background: url(http://lorempixel.com/801/599/)}
/* End Background Control */
<body>
The initial hiccup when the images load is not an issue
<div class="outercontainer">
<div class="optioncontainer">
<div class="optionlist">
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="yellow">Yellow</li>
<li id="orange">Orange</li>
<li id="white">White</li>
<li id="black">Black</li>
</div>
</div>
</div>
</body>