Show on hover in nested div not working - html

Question

I am working on a menu that pops up at the right side of the screen.
https://jsfiddle.net/grhajrbp/
Html:
<div id="east-exit">
<div id="mail-option">
<a ng-click="controller.openEmails()"><i class="communicate-icon mail fa fa-envelope"></i></a>
<a><i class="new-mail fa fa-plus-circle"></i></a>
</div>
<a><i class="communicate-icon fa fa-comments"></i></a>
<i class="east-exit-icon fa fa-arrow-right"></i>
<a><i class="communicate-icon fa fa-phone"></i></a>
<a><i class="communicate-icon fa fa-camera"></i></a>
</div>
CSS:
html {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
#east-exit {
display: flex;
opacity: 1;
z-index: -1;
align-items: stretch;
justify-content: space-around;
flex-direction: column;
position: absolute;
right: 0;
height: 100%;
width: 85px;
font-size: 55px;
}
#east-exit:hover .east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
opacity: 0;
}
#east-exit:hover .communicate-icon {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
#east-exit:hover,
#mail-option:hover,
.mail:hover .new-mail {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
.east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
font-size: 45px;
opacity: 0.1;
}
.communicate-icon {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.new-mail {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
color: grey;
cursor: pointer;
}
The menu shows four buttons. If I were to hover over the mail button, a small plus button should present itself next to the mail button. I'm currently only trying to get the plus button to show on hover (it is not at the right place yet. I can't get the plus button to show on hover of the mail button. Does anyone know how to do this?
Moreover, I also tried to get the button at the right place with flexbox. (The images below show where it is supposed to go). I couldn't get this to work either. Does anyone have any suggestions I could try? First image:
Second image:
Third image:

Answer 1

You can use the following css rule
.communicate-icon.fa.fa-envelope:hover {
background: url(<image name>);
background-repeat: no-repeat;
background-position: -40px 0; // Change as needed
}
You will also need to make your div wider or the background image will not be displayed.