How can I call class into another class in css3? - html

Question

I want to make an effect that would trigger my button transition when I hover the outer div box (parent) that already has its own transition. Can this be done with css or is it in need of some javascript?
My example:
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
position: absolute;
margin-left: 56px;
}
.btn_ani:hover {
background: #ffffff;
color: #99745c;
opacity: 1;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.5s;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>

Answer 1

It can be done with CSS. You could simply move the :hover state to the parent .box and the target the descendants like: .box:hover .btn_ani.
In this case elements can have their own transition value.
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
/* different transition from the parent */
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.7s;
position: absolute;
margin-left: 56px;
}
.box:hover .btn_ani {
background: #ffffff;
color: #99745c;
opacity: 1;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>

Answer 2

If you would like to try some jQuery, you could use a solution such as this:
$('.box').hover(function(){
$('.btn_ani').toggleClass('margin');
});
With the css:
.margin{
margin-top:80px;
}
and here is an example!