<div class="image-wrap">

	<ul>
		
	<li class="first"><a href="https://google.co.jp" class="btn-action"><img src="http://placehold.jp/150x150.png" alt="" /></a></li>

	<li class="second"><a href="https://yahoo.co.jp" class="btn-action"><img src="http://placehold.jp/150x150.png" alt="" /></a></li>

	<li class="third"><a href="#" class="btn-action"><img src="http://placehold.jp/150x150.png" alt="" /></a></li>

	</ul>

</div><!-- /.image-wrap -->


.image-wrap li.first a.btn-action img{
	-webkit-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
	box-shadow: none;
}

.image-wrap li.first a.btn-action img.animate{
	box-shadow: 0 0 6px 6px rgba(117, 180, 196, 0.5);
}

$(document).ready(function(){
	$('li.first').children('a.btn-action').on('mouseenter', function(e){
		//e.preventDefault();
		//console.log("mouseenter");
		//console.log(this); // a
		$(this).children('img').addClass('animate');
	})
	.on('mouseleave', function(e){
		e.preventDefault();
		//console.log("mouseleave");
		//console.log(this); // a
		$(this).children('img').removeClass('animate');
	});

	$('li.second').children('a.btn-action').on('click', function(e){
		e.preventDefault();
	});
});