Вот пример:
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.border {
border: 2px solid #000000;
width: 100px;
height: 100px;
}
.border img {
width: 50px;
height: 50px;
}
.text {
display:none;
}
.text.open {
display: block;
}
.modal {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
top: 0;
left: 0;
z-index: 1001;
}
.modal_open .modal {
display: block;
}
</style>
</head>
<body>
<div class="border">
<img src='#'>
<div class='text'>first
<div class='modal'></div>
</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>second
<div class='modal'></div>
</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>third
<div class='modal'></div>
</div>
</div>
<script>
var handle = function(e) {
this.querySelector('.text').classList.toggle('open', e.type === 'mouseenter');
};
var myLink = document.querySelectorAll('.border');
for (i = 0; i < myLink.length; i++) {
myLink[i].addEventListener('mouseenter', handle);
myLink[i].addEventListener('mouseleave', handle);
}
var quickView = document.getElementsByClassName('text');
var qqqq = function () {
this.classList.toggle('modal_open');
};
for (var i = 0; i < quickView.length; i++) {
quickView[i].addEventListener('click', qqqq, false);
}
</script>
</body>