Artem_A,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hoverBlock {
position: absolute;
z-index: 0;
width:100%;
height: 100%;
background-color: rgba(0, 0, 0,0.7);
}
.hoverBlock div {
width: 69%;
margin: 0 auto;
margin-top: 30%;
}
.hoverBlock h1 {
font: 20px 'Source Sans Pro';
color: #19bd9a;
letter-spacing: 5px;
}
.hoverBlock p {
font: 12px 'Open Sans';
color: #b2b3b3
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var d;
$('#galer div').hover(
function(){
d = $('<div class="hoverBlock">' +
'<div>' +
'<h1>TITLE HERE</h1>' +
'<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>' +
'<a class="share1"></a>' +
'<a class="share2"></a>' +
'</div>' +
'</div>')
$(this).prepend(d);
if (d.height() < 250) {
d.css('margin-top', '10%');
}
},
function(){
d && d.remove();
}
);
});
</script>
</head>
<body>
<div id="galer">
<div style="height:361px"><img src="./img/main/portfolio/galery/layer86.jpg" alt="" ></div>
<div style="height:229px"><img src="./img/main/portfolio/galery/layer87.jpg" alt="" ></div>
<div style="height:301px"><img src="./img/main/portfolio/galery/layer91.jpg" alt="" ></div>
<div style="height:361px"><img src="./img/main/portfolio/galery/layer88.jpg" alt="" ></div>
<div style="height:344px"><img src="./img/main/portfolio/galery/layer95.jpg" alt="" ></div>
<div style="height:374px"><img src="./img/main/portfolio/galery/layer89.jpg" alt="" ></div>
<div style="height:361px"><img src="./img/main/portfolio/galery/layer90.jpg" alt="" ></div>
<div style="height:269px"><img src="./img/main/portfolio/galery/layer93.jpg" alt=""></div>
<div style="height:357px"><img src="./img/main/portfolio/galery/layer96.jpg" alt="" ></div>
<div style="height:301px"><img src="./img/main/portfolio/galery/layer97.jpg" alt=""></div>
<div style="height:255px"><img src="./img/main/portfolio/galery/layer94.jpg" alt=""></div>
<div style="height:209px"><img src="./img/main/portfolio/galery/layer92.jpg" alt="" ></div>
</div>
</body>
</html>