Make a Image glow with Jquery

Question

I'm trying to make Images glow while hovering above them with your mouse with jquery. I have tried multiple ways but none worked..

The images that are supposed to glow are the ones in the list. I have to use Jquery since thats the Exercize I got from school...

And yes, I may use Stackoverflow :p

HTML:

    <h1>Grand Theft Auto V - Showcase</h1>
</header>
<div id="contentHolder">
        <div id="three-columns" class="grid-container">
            <ul class="rig columns-3">
                <li>
                    <img src="images/1.jpg" />
                </li>
                <li>
                    <img src="images/2.jpg" />
                </li>
                <li>
                    <img src="images/3.jpg" />
                </li>
                <li>
                    <img src="images/4.jpg" />
                </li>
                <li>
                    <img src="images/5.jpg" />
                </li>
                <li>
                    <img src="images/6.jpg" />
                </li>
                <li>
                    <img src="images/7.jpg" />
                </li>
                <li>
                    <img src="images/8.jpg" />
                </li>
                <li>
                    <img src="images/9.jpg" />
                </li>
                <li>
                    <img src="images/10.jpg" />
                </li>
            </ul>
</div>
</body>
</html>

JS:

$(".rig img").hover(function(){
    $("this").css("box-shadow", "0px 0px 5px #ddd");
    }, function(){
    $("this").css("box-shadow", "0px 0px 5px #ddd");
}); 

Answer 1

Something like this, maybe...

JS:

$('.holder').hover(function(){
    $(this).find('.effect').addClass('glow');
    }, function(){
     $(this).find('.effect').removeClass('glow');
}); 

HTML:

<div class="holder">
    <div class='effect'></div>
   <img src='http://lorempixel.com/400/200/'>
    </div>

CSS:

.glow {
     box-shadow:0px 0px 50px 30px #dedede inset;    
}
body {
    background:black;
}
img {
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
}
.effect {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.holder {
    cursor:pointer;
    position:relative;
    z-index:2;
    width:400px;
    height:200px;
    border-radius:6px;
}

I made little complicated html structure, because i think that inset glow works better, so, .effect div covers image... looks good, imho. :)

DEMO: http://jsfiddle.net/L9dypg7f/

Answer 2

In your javascript, you have something like:

$("this").css("box-shadow", "0px 0px 5px #ddd");

Because you've wrapped "this" in quotes jquery interprets that as a string and tries to find a <this></this> element. What you want to do, is:

$(this).css("box-shadow", "0px 0px 5px #ddd");

No quotes. In jquery, $(this) refers to the element in the current context. For hover, its the element currently being hovered over.