CSS3 позиционирование и недопонимание использования

Это возможно без использования Javascript, но вам нужно немного переписать свой HTML-код.

То, что вы в основном делаете, - это создать скрытый флажок или радиообъект, который накладывает изображение. Затем вы можете использовать CSS, чтобы проверить его :checked состояние и соответственно скрыть/показать содержимое.

HTML

<figure class="item">
   <label for="toggle" class="item__toggle"></label>
   <input id="toggle" type="radio" name="item__togglers" class="item__check">
   <img src="http://lorempixel.com/200/200/technics" alt="">
   <figcaption class="item__caption">Hello world</figcaption>
</figure>

CSS

.item {
    display: inline-block;
    position: relative;
}

.item__caption {
    background: #fff;
    opacity: 0;
    position: absolute;
        bottom: 15px;
        left: 0;
}

/* TOGGLE MECHANISM */
.item__toggle {
    height: 100%;
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
}

.item__check {
    display: none;
}

/* THIS IS WHERE THE MAGIC HAPPENS */

.item:hover .item__caption,
.item__check:checked ~ .item__caption {
    opacity: 1;    
}

JS FIDDLE
Я создал очень простой jsfiddle, чтобы продемонстрировать функциональность: http://jsfiddle.net/TheNix/6vUVP/1/

Вариант 1: http://jsfiddle.net/m3fU3/4/ Проверить сейчас..

Я думаю, это то, что вы хотели? Просто замените наведение в css активным, для активного - на непрофессиональных терминах, для выбора кликов на css.

Пример:

 .cap-left:active figcaption{
      left: 0;
      }

Вариант 2: вы можете использовать функциональность javascript onclick:

HTML:

<img  src="image.png" id="image1" onclick="zoomImage()"/></a>

JS:

function zoomImage(){
 e.preventDefault();
 document.getElementById('image1').zoom=2;
}

Проверить здесь