Show/hide Div On Image Click Not Working

If you go to http://oandg.co.uk.s156312.gridserver.com/#work and select a portfolio item and click 'More' you will see an image and a text box with a little 'i' in the corner. I wo

Solution 1:

$(function () {
    $(".openBoxButton").click(function () {
        $('#colorbox').fadeIn(1200);
        $.colorbox();
    });

    $('.rsABlock').on('click', 'img.info', function (e) {
        e.preventDefault();
        $('.caption-background').toggleClass('hidden');
    });
});

EDIT: Just to add some explanation of this, you were previously adding a click handler on every click of the ".openBoxButton" class - now I did NOT search for that class in your page but placing this outside that function prevents the event hanlder from being repeatedly added.

EDIT based on comment: I tested using developer tools and it works. #colorBox does not seem to work - likely added/removed cycle or something.

 $(document).on('click', 'img.info', function (e) {
    e.preventDefault();
    $('.caption-background').toggleClass('hidden');
});

Solution 2:

Yes... You can do that with CSS:

<!-- HTML --><divclass="container"><imgsrc="http://placekitten.com/285/275"class="portfolio"alt=""><divclass="mask"><h2>Froosh</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nostrum     porro iste excepturi vel ducimus cumque minima rem voluptates cum!</p></div></div>

---

/* CSS */.container {
    /* Some width */width: 200px;
    display: inline-block;
    position: relative;
    border: 3px solid #ccc;
}
.containerimg {
    display: block;
    width: 100%;
}
.container.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* some color */background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.3s ease-out;
    /* Firefox 4-15 */
    -o-transition: all 0.3s ease-out;
    /* Opera 10.50–12.00 */transition: all 0.3s ease-out;
    /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.container:hover.mask {
    opacity: 1;
}

There is a JsFiddle: http://jsfiddle.net/KaCHN/1/

Is up to you put some style on the .mask element