Pseudo-Class Selection Indicators

CSS / HTML example for http://stackoverflow.com/questions/12893343/htmlcss-set-a-white-arrow-to-the-bottom-image

by Troy Alford

HTML

<span><img src="http://placekitten.com/400/400" /></span>
<span class="selected"><img src="http://placekitten.com/410/410" /></span>
<span><img src="http://placekitten.com/420/420" /></span>

CSS

img {
    border: 1px solid #333;
    color: transparent;
    display: inline-block;
    padding: 5px; margin: 5px;
    position: relative;
    width: 200px; height: 200px;
}
span { display: inline-block; }
span:hover { cursor: pointer; }
span.selected { position: relative; }
span.selected > img { background: #268; }
span.selected:before, span.selected:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 10px; left: 50%; 
    margin: 0 0 0 -25px;
    height: 0; width: 0;
    border: 20px solid transparent;
    border-bottom-color: #000;
    z-index: 1;
}
span.selected:after {
    bottom: 9px;
    border-bottom-color: #fff;
}

JavaScript

$('span>img').on('click', function () {
    var $img = $(this);
    var $span = $img.closest('span');
    
    $span.addClass('selected')
         .siblings().removeClass('selected');
});