ほんわかラップ

にゃーQueryほんわかラップ

by ethertank

HTML

<h1>にゃーQuery</h1>

<figure style="block">
    <figcaption style="block">Original</figcaption>
    <img src="http://placekitten.com/300/200" />
</figure>

<figure style="block">
    <figcaption style="block">ほんわかラップ</figcaption>
    <img class="nuko" src="http://placekitten.com/300/200" />
</figure>

CSS

img { vertical-align: bottom; }

.nuko-wrap{
    position:relative;
    display:inline-block;
}

.nuko-wrap:after{
    position:absolute;display:block;content:"";
    top:0;right:0;bottom:0;left:0;
    box-shadow:inset 0 0 40px 0 rgba(180,80,0,0.95);
}

JavaScript

jQuery(function(){
    $('.nuko').wrap('<span class="nuko-wrap"></span>');
})();