Image Hover Caption

Add image hover captions by including the caption as alternative text and adding the following to the website head of the desired page:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript">
</script>

<script src="https://u.jimcdn.com/e/o/sda043e77dce78886/userlayout/js/jquery-hover-caption-copy.js" type="text/javascript">
</script>

<script type="text/javascript">
    $(document).ready(function() {
        $('img').hover_caption();
    });
</script>

<style type="text/css">
    
    .hover_caption {
        background-color: rgba(0, 0, 0, 0.7);
        -webkit-transition: all 0.1s ease;
        -moz-transition: all 0.1s ease;
        -o-transition: all 0.1s ease;
        -ms-transition: all 0.1s ease;
        transition: all 0.1s ease;
    }
    
    .hover_caption_caption {
        text-align: center;
        padding: 5px !important;
        top: 50%;
        font-size: 18px !important;
        transform: translate(0, -50%)
    }
</style>

Note that this will affect all images on the page. 

 

Adjust the font size of the caption by changing font-size: 18px !importantto 14px, 24px, etc.