Я нашел способ сделать эту работу чистым css:

Я просто поддельный контент -method

чистый метод CSS для включить img: after.

Вы можете проверить CodePen: я просто поддельный контент или посмотреть источник.

Источник

HTML

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

CSS

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

Поддержка браузера

✓ Chrome 10 +

✓ Firefox 11 +

✓ Opera 9.8 +

✓ Safari

Нет поддержки

⊗ Internet Explorer 8/9

Пожалуйста, проверьте в других браузерах

Я думаю, что лучший способ взглянуть на то, почему это не работает, это то, что: до и: после вставки их содержимого до или после содержимого в теге, к которому вы их применяете. Таким образом, он работает с divs или spans (или большинством других тегов), потому что вы можете размещать контент внутри них.

<div>
:before
Content
:after
</div>

Однако img является самодостаточным, самозакрывающимся тегом, и поскольку он имеет нет отдельного закрывающего тега, вы ничего не можете положить внутрь. (Это должно выглядеть как <img>Content</img>, но, конечно, это не работает.)

Я знаю, что это старая тема, но она появляется сначала в Google, поэтому, надеюсь, это поможет другим учиться.

Псевдо-селекторы до и после не вставляют элементы HTML - они вставляют текст до или после существующего содержимого целевого элемента. Поскольку элементы изображения не содержат текст или имеют потомки, ни img:before, ни img:after не сделают вам ничего хорошего. Это также касается таких элементов, как <br> и <hr> по той же причине.

Я попробовал и нашел более простой способ сделать это. Вот HTML:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

То, что я сделал, это поместить пустой тег <p> после моего тега изображения. Теперь я буду использовать p :: before, чтобы показать изображение и поместить его в соответствии с моими потребностями. Вот CSS:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

Попробуйте.

Вот еще одно решение, использующее контейнер div для img при использовании :hover::after для достижения эффекта.

HTML следующим образом:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

CSS следующим образом:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

Чтобы увидеть его в действии, проверьте скрипт Я создал. Просто, чтобы вы знали, что это кросс-браузер, и нет необходимости обманывать код с помощью «поддельного контента».