I'm just fake content

This method will handle img:after image after all.

HTML

<!--

    I'm just fake content.

    Pure CSS method to enable img:after. 

    I created this because of stackoverflow:
    http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-tags

    2012 by Tim Pietrusky
    tim-pietrusky.de
-->

<!--
    Known limitations:
     - Firefox: img.src has to be a none existing image or completely removed.

    Quick tip:
    - img:hover {content:"hover the sweet kitten to see some visual vomit";}. 
-->

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

CSS

body {
   margin:10px;
}

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 + some visual vomit */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;
    
    /* if you still do not get it: this is visual vomit */
    border:10px solid rgba(240, 240, 240, .5);
    
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    
    -webkit-box-shadow: 0 0 15px rgba(60, 60, 60, .4);
       -moz-box-shadow: 0 0 15px rgba(60, 60, 60, .4);
            box-shadow: 0 0 15px rgba(60, 60, 60, .4);
}

/* img:before */
img:before {
    /* show this */
    content:" ";
    
    /* hack for firefox, but works for all other browsers too */
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
    
    /* this is for chrome */
    /* content:url(http://placekitten.com/g/250/250);*/
}

/* img:after */
img:after {
    /* width of img:before + border + u know */
    left:290px;
    
    content:url(http://lorempixel.com/400/250/city/1);
}

/* just some visual vomit */

/* no cool animation possible because w3c hates :before & :after */
/* :hover for the img */
img:hover:before {
    padding:125px 200px;
    
    /* fallback */
    background:url(http://lorempixel.com/400/250/city/3) no-repeat;
    
    /* CSS3 - multiple backgrounds */
    background-image: 
        url(http://ima.gs/transparent/001337/ffffff/visual_vomit-500x250.png), 
        url(http://lorempixel.com/400/250/city/3);
    background-position: 50%, left top;
    background-repeat: no-repeat;
    
    -webkit-filter: hue-rotate(180deg);
    
    /* chrome */
    /* content:url(http://lorempixel.com/400/250/city/3); */
}

img:hover:after {
   ...