There is an issue in the code where there are two div elements. When the mouse hovers over the first div, the background color changes. And when it goes to the second div, both background colors change. The desired behavior is for both background colors to change when hovering over the first div!
.aboutboth {
width: 370px;
margin: 0 auto;
}
.about-mohamad {
margin: 0 auto;
width: 170px;
height: 230px;
background: #666666;
float: left;
text-align: center;
margin-right: 30px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
position: relative;
}
.about-mohamad:hover {
background: #e9e9e9;
}
.about-mohamad div {
margin: 0 auto;
width: 150px;
height: 150px;
background: white;
margin-top: 10px;
margin-bottom: 25px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
}
.about-mohamad div:hover {
background: #2d3030;
}
.about-mohamad span {
display: inline;
font-size: 13px;
display: inline-block;
color: white;
}
.about-mohamad p {
font-size: 10px;
}
.about-mohamad div img {
margin-top: 25px;
}
.about-mohamad span#abouthovera {
display:inline;
text-transform: uppercase;
font-size: 10px;
}
.about-mohamad:hover span#abouthovera {
display:none;
}
.about-mohamad span#abouthoverb {
display:none;
}
.about-mohamad:hover span#abouthoverb {
display:inline;
color: #666666;
text-transform: uppercase;
font-size: 10px;
}
<div class="aboutboth">
<div class="about-mohamad">
<div><img src="http://rezaaria.com/1.png"></div>
<span id="abouthovera">job</span>
<span id="abouthoverb">name</span>
</div>
</div>