Icon Hover effect made with divs, Margin Issue

Question

Here's my Fiddle:

#facebookIcon{ 
    vertical-align:middle;
    color:white;
    font-size:5.5em;

    opacity:0.4; 
}

#facebookinner:hover  #facebookIcon{
    opacity:1.0;
}

#facebookinner{

    background:#3b5998;
    border-radius:100px;
    height:100px;
    width:100px;
    margin:0 auto;
    text-align:center;
    line-height:100px; 

    opacity:0.4;
    -webkit-transition:
}

#facebookinner:hover{
    opacity:1.0;
}

#facebookouter {  
  background-color:Green;
  border:5px solid rgba(0,0,0,0);
  height:100px;
  width:100px;
  border-radius:100px;
  display: table-cell;
  vertical-align: middle;

 -webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-                   radius 0.2s     linear,margin 0.2s linear;
  transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s     linear,margin 0.2s linear;
    -moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s     linear,margin 0.2s linear;
}

#facebookouter:hover {
    height:130px;
    width:130px;
    border-radius:130px;
    border:5px solid #3b5998;
    opacity:1.0;
    -webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-                    out,border-radius 0.2s linear,margin 0.2s linear;
    transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
    -moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;   
}

footer {

 margin-top:250px;
 height:150px;
 position: absolute;
 right: 0;
 bottom: 10;
 left: 0;
 padding: 5 rem;
 background-color: Green;
 text-align: center;
 padding-top:30px;
 padding-left:40px;
}

/*________________Here is the Second Icon________________*/

    #twitterIcon{
    vertical-align:middle;
    color:white;
    font-size:3.5em;
    -webkit-transition:font-size 0.2s;
    -moz-transition:font-size 0.2s;
     transition:font-size 0.2s;
 }

 #twitterinner:hover  #twitterIcon{
    opacity:1.0;
    font-size: 3.5 em
 }

 #twitterinner {
    background:#23dcd5;
    border-radius:100px;
    height:100px;
    width:100px;
    margin:0 auto;
    text-align:center;
    line-height:100px; 


    -webkit-transition:height 0.2s, width 0.2s, line-height 0.2s;
    -moz-transition:height 0.2s, width 0.2s, line-height 0.2s;
    transition:height 0.2s, width 0.2s, line-height 0.2s;
}

#twitterinner:hover{
    opacity:1.0;
    height: 80px;
    width:80px;
    line-height:80px;
}

#twitterouter{    
background-color:Green;
border:5px solid #23dcd5;
height:100px;
width:100px;
border-radius:100px;
display: table-cell;
vertical-align: middle;
opacity:0.7;
}

#twitterouter:hover {
    opacity:1.0;
} 

I`m a beginner in CSS (1 week of learning) and I saw this hover effect (at the bottom of this page for the Social Icons).

So I tried to make the same hover effect with my limited skills. After a long time I made the same effect with two divs and an Icon.

The Problem is now that:

1. Im not able to set a margin to any of the "Icons", this means i want a gap between the FacebookIcon and the TwitterIcon so they wont interfere like the FacebookIcon is interfering with the Twitter Icon.

2. How can I hover over the inner div and activating the hover of the outer div (I can not make the inner div the parent of the outer because the outer has to be bigger than the inner).

3. I want the FacebookIcon Outer to grow from the center and not like its doing now. (Like in the example in the Webpage mentioned above.

I've searched for this solutions long time and found nothing suitable. Probably there is a much easier way of creating this Icons, this would be another solution :)

Thanks for your advice and sorry for my bad English (German here).

Answer 1

Im not able to set a margin to any of the "Icons"

That's because margin property is not applicable to display: table-cell elements.

How can I hover over the inner div and activating the hover of the outer div

Well, you need to change your strategy. Set all the necessary CSS declarations on the child (<i> tag) and change the styles on parent:hover i selector.

Here we go:

HTML:

<footer>
    <a href="#" class="icon-wrapper">
        <i class="icon icon-facebook"></i>
    </a>

    <a href="#" class="icon-wrapper"> 
        <i class="icon icon-twitter"></i>
    </a>
</footer>

CSS:

.icon-wrapper {
    float: left;
    display: block;
    margin: 0 1.875rem;
    color: white;
    font-size: 5.5rem;
}

.icon-wrapper i.icon {
    display: block;
    width: 8rem;
    height: 8rem;
    line-height: 8rem;
    border-radius: 50%;
    opacity: 0.5;
    transition: all .2s;
}

.icon-wrapper:hover i.icon {
    opacity: 1;
    box-shadow: 0 0 0 1.5625rem green,  /* <-- = the parent's background-color */
                0 0 0 1.875rem #9b59b6;
}

.icon-facebook {
    background-color: #3b5998;
}

.icon-twitter {
    background-color: #23dcd5;
}

WORKING DEMO.