css - ホバーではなくクリックで動作するようにギャラリーを変更するにはどうすればよいですか?

Question

CSSと一般的なコーディングに関しては、私は少し緑です。私はギャラリーを作成しようとしていますが、他の場所からのコードを使用してここまで来ました:

http://mccarronandco.com/newsite/test.html

もうすぐそこですが、ユーザーがページの他の場所をクリックしたときにメイン画像がリセットされるのを止めようとしているので、「フォーカス」がサムネイルの1つを離れたときに. ページの CSS は次のとおりです。

.gallerycontainer{
position: relative;
float:left;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
}

.thumbnail:focus{
    background-color: transparent;
    outline:none;
}

.thumbnail:focus img{
    border: 1px solid black;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    left: -1000px;
    visibility: hidden;
    text-decoration: none;

}

.thumbnail span img{ /*CSS for enlarged image*/

}

.thumbnail:focus span{ /*CSS for enlarged image*/
    position: absolute;
    visibility: visible;
    top: -520px;
    left: 30px; /*position where enlarged image should offset horizontally */
    z-index: 50;
}   

よろしく、

アンディ