Центр шрифта Удивительный значок над изображением при наведении

Ответ 1

Использование здесь важно для рассмотрения. Это триггер, поэтому я бы использовал ссылку внутри. Я бы не отобразил: ни один, поскольку IOS не будет работать над действиями внутри этого, когда отображалось состояние на селекторе: нет или видимость: скрыта, даже если: hover изменяет это состояние. Используйте непрозрачность и положение, чтобы "скрыть это".

ОЧЕНЬ ВАЖНО:

Родитель не является размером дочернего образа внутри него, если только этот div не является дочерним элементом того, что ограничивает его ширину, или div является плавающим или встроенным блоком. Если вы поместите это в столбец внутри сетки, а изображение - на любой ширине видового экрана, такой же широкий, как этот столбец, тогда вы можете удалить "встроенный блок" в .profile-img-container, однако, если вы используете его просто автономно вы должны его плавать или класть на него .inline-блок, но тогда вам нужно изменить отзывчивость изображения, если родительский макс-ширина inline-блока: 100% не работает (точно так же, как это делает работайте, если внутри таблицы-ячейки).

: hover не очень хорошая идея, я бы использовал jQuery, чтобы сделать это щелчком, переключив родительский класс.

DEMO: http://jsfiddle.net/prtkqb44/

CSS

.profile-img-container {
    position: relative;
    display: inline-block; /* added */
    overflow: hidden; /* added */
}

.profile-img-container img {width:100%;} /* remove if using in grid system */

.profile-img-container img:hover {
    opacity: 0.5
}
.profile-img-container:hover a {
    opacity: 1; /* added */
    top: 0; /* added */
    z-index: 500;
}
/* added */
.profile-img-container:hover a span {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}
/* added */
.profile-img-container a {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
}

HTML:

<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <a href="#"><span class="fa fa-upload fa-5x"></span></a>
</div>

Ответ 2

Вы можете центрировать его как по горизонтали, так и по вертикали, используя процентную ширину, но это означает, что вы знаете примерно ширину в процентах элемента, который вы пытаетесь расположить, в этом случае это удивительный шрифт. Обратите внимание, что я выровнял его примерно, позиционируя его влево и вверх на 45%.

Я обновил ваш код с вышеупомянутой частью и также применил эффект наведения к содержащему DIV, чтобы шрифт-удивительный значок не мерцал. Он мерцал, потому что, когда вы парили над ним, наведение на изображение терялось.

HTML остается, то же самое, только стиль отличается:

.profile-img-container {
    position: relative;
}

.profile-img-container i {
    position: absolute;
    top: 45%;  
    left: 45%;
    transform: translate(-45%, -45%);
    display: none;
}

.profile-img-container:hover img {
    opacity: 0.5;    
}

.profile-img-container:hover i {
    display: block;
    z-index: 500;
}

Обновленный JSFiddle.

Ответ 3

Здесь фиксированная версия решения @Christina: http://jsfiddle.net/prtkqb44/354/

Я удалил тот, который не работал должным образом

.profile-img-container img:hover {
    opacity: 0.5
}

и добавлен в .profile-img-container

background: rgba(255, 255, 255, .5);

Ответ 4

Следующее решение должно работать, если вы можете позволить себе иметь фиксированную ширину в самом верхнем контейнере (в примере 300px) или иначе иметь значение line-height, которое всегда равно рендеринговой высоте изображение.

Решение использует свойства line-height и text-align для достижения вертикального и горизонтального позиционирования соответственно.

<div class="profile-img-container">
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <div class="profile-img-i-container">
        <i class="fa fa-upload fa-5x"></i>
    </div>
</div>

.profile-img-container {
    height: 300px;
    width: 300px;
    line-height: 300px;
    position:relative;
}

.profile-img-container:hover img {
    opacity: 0.5;
}

.profile-img-container:not(:hover) .profile-img-i-container {
    display: none;
}

.profile-img-i-container {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 500;
    text-align:center;
}

.profile-img-i-container i {
    display:block;
    line-height: inherit;
}

Fiddle

О мерцании:

Будьте осторожны с :hover. В вашем примере у вас был следующий фрагмент:

.profile-img-container img:hover + i {
    display: block;
    ...
}

При этом элемент i появляется, когда вы наводите изображение. Затем элемент i помещается поверх изображения, поэтому вы больше не вибрируете изображение, а элемент i. Значок снова скрывается, и вы снова нависаете над изображением. Это и вызвало мерцающий эффект. Решение состоит в том, чтобы работать с свойством :hover самого верхнего элемента.

.profile-img-container:hover img + i {
    display: block;
    ...
}

Ответ 5

Я изменил положение .profile-img-container на абсолютный и установил его ширину до 50% (вы можете отрегулировать ширину, чтобы изменить размер изображения).

.profile-img-container {
position: absolute;
width:50%;
}

из-за мерцающего эффекта, вы должны установить индекс img z выше, чем z-индекс i.

.profile-img-container img:hover {
opacity: 0.5;
z-index: 501;
}

.profile-img-container img:hover + i {
display: block;
z-index: 500;
}

Я изменил положение я на абсолютное и центрировал его с помощью margin-left и margin-top

.profile-img-container i {
display: none;
position: absolute;
margin-left:43%;
margin-top:40%;
}

И, наконец, я изменил положение img на абсолютный

.profile-img-container img {
position:absolute;
}

Попробуйте этот код: http://jsfiddle.net/fns8byfj/16/