Invert

Здравствуйте, я решил сделать сайт по шаблону от wix.com, я только учусь, вот не могу понять как сделать так что бы блок с картинкой заливался желтым с opacity 0.6 где-то и в то же время что бы эта картинка была ссылкой на саму себя но в окне галереи от fancybox. У меня заливка желтым уже стоит через hover, но картинка не работает как ссылка, если я убираю hover то ссылка становится активной и галлерея работает как задумано. Вот ссылка на шаблон сайта: http://ru.wix.com/website-template/view/html/1642?originUrl=http%3A%2F%2Fru.wix.com%2Fwebsite%2 Ftemplates%2Fhtml%2Fall%2F2&bookName=&galleryDocIn dex=7&category=all Вкладка "О нас", внизу есть фото команды, они при наведении на них мышкой заливаются желтым, а блок с текстом нет, у меня это работает, но не работает ссылка в картинке на галерею как в оригинальном шаблоне. Вот код HTML: <tr> <td id ="td1"> <div id="line1block7"> <div class="im"> <a class="gallery" rel="group" href="images/com_1big.jpg" width="240px" height="198px"> <imgsrc="images/com_1.jpg" width="240px" height="198px"> </a></div> <span class="emp1">Юлия Соколова</span><span class="empinfo1"><p class="text1">Руководитель студии<br><br>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p></span> </td> </div> Код CSS: .im{ width: 240px; height: 198px; margin-bottom: 5px; border: none; position: relative; } .im:hover{ transition:all .5s; background: yellow; content: " "; opacity: 0; position: absolute; top:0; bottom: 0; left: 0; right: 0; } div:hover .im:after{ opacity: .6; } .emp1, .empinfo1{ padding-left: 10px; } .emp1{ font-family: play, sans-serif; margin-top: 5px; padding-top: 15px; background-color: #CFCFCF; display: block; position: absolute; width: 230.2px; height: 29px; color: #FFFFFF; font-size: 19px; } Помогите пожалуйста разобраться с проблемой, а то я две недели над этим сидеть буду если не больше наверное, я уже в тупике, не знаю что дальше делать, или переписывать этот код и как-то изменять его частично.