Circle glow effect around the image - html

Question

I am trying to create glow effect around the image ,But I get unnecessary margin.Can some one tell me how to remove it.Here is fiddle - https://jsfiddle.net/q2gv5oka/ , hover the image to see margin.
<div id="play"></div>
Below is my css
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}

Answer 1

Your height and width for #play is set to 70px. Set it to the width and height of your image, 62px in this case.
EDIT: Also as Nick Coad mentioned in the comments, your margins would now be set to -31px instead of -35px.
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 62px;
height: 62px;
margin: -31px 0 0 -31px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
<div id="play"></div>

Answer 2

yes, the first answer are correct, because your images are smaller than your size, just add background-size:cover or background-size:contain to fit exactly.
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
position: absolute;
background-size:cover;
top: 50%;
left: 50%;
width: 62px;
height: 62px;
margin: -35px 0 0 -35px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
<div id="play"></div>

Answer 3

You can try below code. Set the background-size to 100%.
html code
<div id="play"></div>
css code
#play {
background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
background-size:100%;
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
z-index: 10;
}
#play:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}
View demo here