CODEWITHSUNDEEP
htmlcss
Vishnu
Vishnu

Reputation: 2452

Circle glow effect around the image

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);
}

Upvotes: 0

Views: 678

Answers (3)

Domain
Domain

Reputation: 11808

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

Upvotes: 0

mike-schultz
mike-schultz

Reputation: 2364

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>

Upvotes: 2

mmativ
mmativ

Reputation: 1414

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>

Upvotes: 1

Related Questions