position: relative;
z-index: 3;.bg2 {
opacity: 0;
}
.bg1:hover .bg2 {
opacity: 1;
}<div class="bg"></div>.bg {
margin: 50px;
width: 200px;
height: 200px;
background-color: red;
transition: all 10s ease-in;
}
.bg:hover {
transition: all 10s ease-in;
background-color: green;
}<div class="contacts">
<div class="mail">
<div class="mailicon"></div>
<a>PRIMER@GMAIL.COM</a>
</div>.contacts{
position: relative;
padding-left: 21px;
line-height: 16px;
}
.mailicon{
position: absolute;
top: 0px;
left: 0px;
}.intro-img {
display: block;
position: absolute;
top: 76px;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
}<img src="img/background-photo.jpg" width="1200" height="508"><link type="text/css" href="js/libs/assets/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script src="js/libs/jquery.mousewheel.js"></script>
<script src="js/libs/jquery.jscrollpane.min.js"></script>