Слой режима смешивания выходит за пределы изображения

Итак, я использую mix-blend-mode: multiply; эффект для создания многослойного слоя поверх моего изображения при наведении курсора. Проблема заключается в том, что этот слой выходит за пределы рамки изображения, как показано на рисунке ниже. Я попытался установить ширину и высоту в .imgcon и .imgcon> img (см. Код ниже), и слой вписывается, но затем он перепутает чувствительную веб-функцию при просмотре с разным разрешением экрана. Поэтому я попытался установить ширину и высоту на 100%, чтобы сохранить отзывчивую функцию, но слой по-прежнему выходит из границы изображения.Слой режима смешивания выходит за пределы изображения

Heres мой код:

.imgwrapper { 
 
    position: relative; 
 
} 
 

 

 

 
.imgcon + div { 
 
position: absolute; 
 
    left: 42%; 
 
    top: 44%; 
 
    color: white; 
 
    text-decoration: underline; 
 
    opacity:0; 
 
    display: block; 
 
    pointer-events: none; 
 
    font-size: 18px; 
 
    
 
    letter-spacing: 4px; 
 

 
} 
 

 
.imgcon { 
 
position: relative; 
 
background: rgba(209, 19, 15, 0); 
 
    transition: ease 0s; 
 
    -webkit-transition: ease 0s; 
 
    -moz-transition: ease 0s; 
 
    -ms-transition: ease 0s; 
 
    -o-transition: ease 0s; 
 
    mix-blend-mode: multiply; 
 
} 
 
.imgcon > img { 
 
transition: ease 0s; 
 
    -webkit-transition: ease 0s; 
 
    -moz-transition: ease 0s; 
 
    -ms-transition: ease 0s; 
 
    -o-transition: ease 0s; 
 
} 
 
.imgcon:hover { 
 
    background: #b41f24; 
 
    background: rgba(180, 31, 36, 0.85); 
 

 

 
} 
 
.imgcon:hover > img { 
 
    z-index: -1; 
 
    -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%); 
 
    filter: grayscale(100%) blur(1.5px) contrast(100%) ; 
 
    mix-blend-mode: multiply; 
 

 
} 
 

 
.imgcon:hover + div { 
 
    display: block; 
 
    opacity: 1; 
 
    z-index: 1; 
 
}

<a href="works.html?option=emkoinvite" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>EmKO invitation</h3> 
 
\t \t \t \t \t \t \t <span class="category">Identity, print</span> 
 

 
\t \t \t \t \t \t \t <div class="imgwrapper"> 
 
\t \t \t \t \t \t \t <div class="imgcon"> 
 
\t \t \t \t \t \t \t <img src="http://i.imgur.com/XmhcxJS.png" /></div> 
 
\t \t \t \t \t \t \t <div id="view">view</div></div> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
\t \t \t \t </a>

источник

2016-10-18 Phuong

.imgwrapper { 
    position: relative; 
    display: inline-block; 
} 

.imgcon > img{display:block}

источник

2016-10-18 06:17:57

работает отлично, спасибо. – Phuong

Все, что вам не хватает является display: inline-block; на родителя Изображение в:

.imgwrapper { 
 
    position: relative; 
 
} 
 
.imgcon + div { 
 
position: absolute; 
 
    left: 42%; 
 
    top: 44%; 
 
    color: white; 
 
    text-decoration: underline; 
 
    opacity:0; 
 
    display: block; 
 
    pointer-events: none; 
 
    font-size: 18px; 
 
    letter-spacing: 4px; 
 
} 
 
.imgcon { 
 
display: inline-block; 
 
position: relative; 
 
background: rgba(209, 19, 15, 0); 
 
    transition: ease 0s; 
 
    -webkit-transition: ease 0s; 
 
    -moz-transition: ease 0s; 
 
    -ms-transition: ease 0s; 
 
    -o-transition: ease 0s; 
 
    mix-blend-mode: multiply; 
 
} 
 
.imgcon > img { 
 
transition: ease 0s; 
 
    -webkit-transition: ease 0s; 
 
    -moz-transition: ease 0s; 
 
    -ms-transition: ease 0s; 
 
    -o-transition: ease 0s; 
 
} 
 
.imgcon:hover { 
 
    background: #b41f24; 
 
    background: rgba(180, 31, 36, 0.85); 
 
} 
 
.imgcon:hover > img { 
 
    z-index: -1; 
 
    -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%); 
 
    filter: grayscale(100%) blur(1.5px) contrast(100%) ; 
 
    mix-blend-mode: multiply; 
 
} 
 
.imgcon:hover + div { 
 
    display: block; 
 
    opacity: 1; 
 
    z-index: 1; 
 
}

<a href="works.html?option=emkoinvite" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>EmKO invitation</h3> 
 
\t \t \t \t \t \t \t <span class="category">Identity, print</span> 
 
\t \t \t \t \t \t \t <div class="imgwrapper"> 
 
\t \t \t \t \t \t \t <div class="imgcon"> 
 
\t \t \t \t \t \t \t <img src="http://i.imgur.com/XmhcxJS.png" /></div> 
 
\t \t \t \t \t \t \t <div id="view">view</div></div> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
\t \t \t \t </a>

Это потому, что этот родитель является div и, как таковой, является блочным элементом и принимает всю доступную ширину. Изменение его display до inline-block делает его обертывание размерам его детей.

источник

2016-10-18 06:13:58 elektronik

Спасибо, но слой l истекает около 2 пикселей в нижней части изображения. Любая идея почему? – Phuong

Вот ваше решение. Для объяснения любой элемент блока по умолчанию будет составлять 100% ширины его родителя. Если вы хотите, чтобы элемент оставался шириной его контейнера, вам нужно использовать другой атрибут display; inline-block, казалось, имел наибольший смысл здесь.

Добавленное пространство внизу - это то, что многие элементы имеют, я называю это пространством descender. Некоторые буквы, такие как «g» и j, опускаются ниже текстовой строки. Части, которые окунаются, называются descenders. Многие элементы оставляют мало места для descenders. Чтобы избавиться от этого пространства, вы можете установить line-height на 0.

ширина и по центру текст материал был просто легкий путь для меня, чтобы центрировать текст правильно.

Позвольте мне знать, если у вас есть какие-либо другие вопросы!

.imgwrapper { 
 
    position: relative; 
 
} 
 

 

 

 
.imgcon + div { 
 
position: absolute; 
 
    text-align: center; 
 
    top: 42%; 
 
    width: 256px; 
 
    color: white; 
 
    text-decoration: underline; 
 
    opacity:0; 
 
    display: block; 
 
    pointer-events: none; 
 
    font-size: 18px; 
 
    
 
    letter-spacing: 4px; 
 

 
} 
 

 
.imgcon { 
 
position: relative; 
 
display: inline-block; 
 
line-height: 0; 
 
background: rgba(209, 19, 15, 0); 
 
    transition: ease 0s; 
 
    -webkit-transition: ease 0s; 
 
    -moz-transition: ease 0s; 
 
    -ms-transition: ease 0s; 
 
    -o-transition: ease 0s; 
 
    mix-blend-mode: multiply; 
 
} 
 
.imgcon > img { 
 
transition: ease 0s; 
 
    -webkit-transition: ease 0s; 
 
    -moz-transition: ease 0s; 
 
    -ms-transition: ease 0s; 
 
    -o-transition: ease 0s; 
 
} 
 
.imgcon:hover { 
 
    background: #b41f24; 
 
    background: rgba(180, 31, 36, 0.85); 
 

 

 
} 
 
.imgcon:hover > img { 
 
    z-index: -1; 
 
    -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%); 
 
    filter: grayscale(100%) blur(1.5px) contrast(100%) ; 
 
    mix-blend-mode: multiply; 
 

 
} 
 

 
.imgcon:hover + div { 
 
    display: block; 
 
    opacity: 1; 
 
    z-index: 1; 
 
}

<a href="works.html?option=emkoinvite" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>EmKO invitation</h3> 
 
\t \t \t \t \t \t \t <span class="category">Identity, print</span> 
 

 
\t \t \t \t \t \t \t <div class="imgwrapper"> 
 
\t \t \t \t \t \t \t <div class="imgcon"> 
 
\t \t \t \t \t \t \t <img src="http://i.imgur.com/XmhcxJS.png" /></div> 
 
\t \t \t \t \t \t \t <div id="view">view</div></div> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
\t \t \t \t </a>

источник

2016-10-18 06:28:21 CourtDemone

Слой режима смешивания выходит за пределы изображения

ответ

Смежные вопросы