[CSS][JavaScript][JQuery] 이미지 어두워지는 방법

<div class="imgBackground">

<img id="img1" src="abc.png" class="center-block">

</div>

▤ CSS

<style>

div.imgBackground{background:black;}

img.center-block:hover {opacity:0.3;}

</style>

▤ Javascript

<style>

div.imgBackground{background:black;}

</style>

<script>

document.getElementById('img1').onmouseover = function(){

this.style.opacity = "0.3";

}

document.getElementById('img1').onmouseout = function(){

this.style.opacity = "1";

}

</script>

▤ jQuery

<style>

div.imgBackground{background:black;}

</style>

<script>

$('#img1').mouseover(function(){

$(this).css('opacity','0.3');

});

$('#img1').mouseout(function(){

$(this).css('opacity','1');

});

</script>