JS + CSS.
Целиком весь функционал вам тут врядли будут писать, это не поправка, это в чистом виде уже задача для фрилансера.
Скиньте хотя бы свои наработки.
Что именно как? Есть картинка, вокруг нее рамка. Под ней скрытое описание. На ней же контейнер со 100% прозрачностью, который спрятан через z-index. А на ней надпись по центру скрыта.
При ховере надпись делаем видимой, скрытое описание показываем, прозрачность контейнера делаем 50%.
При клике оккрываем модельное окно, куда аяксом грузим картинку. Окно сверстано заранее и либо сидит в DOM, либо также отдельно грузится.