How to get a <img> tag the focus

Actually you CAN focus an <img> - with the help of tabindex:

img:focus {
    outline: 2px solid blue;
}
<img src="http://www.w3schools.com/images/w3logotest2.png" tabindex="0">

You can't "focus" an image unless you have an interactive element or navigate to it using tab. Try adding an interactive element on a wrapper div like so:

Html

<a class="imageAnchor" href="#">
    <img id="image_java" alt="image_not" src="http://www.w3schools.com/images/w3logotest2.png" />
</a>

CSS

.imageAnchor:focus img{
    border: 2px solid blue;
}

http://jsfiddle.net/4x7wg7sb/1/


If its an anchor tag you can also use

A:focus img{border: 2px solid blue;}

Tags:

Html

Css