Как сделать маску изображения отображаемой на hover

На моем сайте у меня есть страница профиля с фотографией пользователя. Когда пользователь наведет над своей фотографией, я хочу, чтобы прозрачная маска с каким-то текстом появлялась над изображением, которое пользователь может щелкнуть, что вызывает модаль, где пользователь может обновить свой профиль.Как сделать маску изображения отображаемой на hover

Я не могу заставить его работать. Демо ниже:

$(document).ready(function() { 
 

 
    $('.profile-image').hover(function() { 
 
    $('.mask-layer').css("visibility", "visible"); 
 
    }, function() { 
 
    $('.mask-layer').css("visibility", "hidden"); 
 
    }); 
 

 

 
});

.profile-image-container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    position: relative; 
 
} 
 
.profile-image-container .profile-image { 
 
    border-radius: 6px; 
 
    margin: auto; 
 
} 
 
.profile-image-container .mask-layer { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    border-radius: 6px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    visibility: hidden; 
 
} 
 
.profile-image-container .mask-layer span, 
 
.profile-image-container .mask-layer i { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="profile-image-container"> 
 
    <img class="profile-image" src=http://nineplanets.org/images/earth.jpg alt="Profile img 0313"> 
 
    <div class="mask-layer"> 
 
    <div class="update-pic"> 
 
     <span>Update Photo</span> 
 
    </div> 
 
    </div> 
 
</div>

Вот мой jsfiddle.

На моем сайте это выглядит лучше, маска фактически сидит по центру изображения. Но он все еще вспыхивает.

Также это важно, я хочу, чтобы курсор всегда отображался как ссылка. В настоящее время, когда пользователь наводится над текстом, курсор меняет текст на строку текста, и я не хочу этого.

источник

2016-07-27 user4584963

как об использовании только CSS:

.mask-layer{ 
    visibility: hidden: 
} 
.profile-image:hover mask-layer{ 
    visibility: visible; 
    cursor: pointer; 
}

Я обновил свой jsfiddle с вышеуказанным css, и он не мигает.

http://jsfiddle.net/fcfj0y3a/3/

для части, нажмите использования:

$('.mask-layer').on('click', function(e) { 
    alert(e.target, 'was clicked'); 
});

источник

2016-07-27 01:26:20 4lackof

здорово, что решает мигания, но как насчет изменения курсора, когда я парить над текстом. Мне нужно связать событие jquery с нажатием на маску, и мне нужно, чтобы он работал, если пользователь нажимает на текст в промежутке, а также – user4584963

проверяет мое последнее редактирование. Я не помещал курсор: указатель; в jsfiddle, но это то, как вы принудительно изменяете курсор. на клике, для использования jQuery: '$ ('. mask-layer'). on ('click', function (e) {alert (e.target, 'clicked!');}' (I'm написав это в комментарии, чтобы макет был не совсем корректным, но код - то, что вам нужно. – 4lackof

okay Я поместил код jQuery в свой ответ, чтобы его было легче читать (а также была исправлена синтаксическая ошибка) – 4lackof

Там нет необходимости использовать JavaScript, если вы просто хотите, чтобы показать маску, когда пользователь

наведения указателя мыши на изображении

здесь демо. в принципе, я просто добавить еще одно правило CSS

.profile-image-container:hover .mask-layer { 
    display: flex; 
}

и сделать mask-layer по умолчанию для display: none

demo

источник

2016-07-27 01:24:29 Even

Как сделать маску изображения отображаемой на hover

ответ

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