<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<style>
.A1 {height: 256px;width: 256px;position: absolute}
.A2 {background: rgba(255,255,51,3); top: 50px; left: 50px;}
.A3 {background: rgba(255,51,204,3); top: 80px; left: 100px;}
.A31:hover {background: rgba(155,51,204,3); top: 90px; left: 110px;}
.A4 {background: rgba(153,255,255,3); top: 150px; left: 150px;}
</style>
<body>
<div class="A1 A2">Изображение</div>
<div class="A1 A3 A31">Появляющееся затемнение + ссылки, которые должны появляться, только когда наведёшь курсор мыши.</div>
<div class="A1 A4">Глянец - Который мешает предыдущиму слою</div>
</body>
</html>