CSS Transition on div when hovering over a button

Question

so i've found some css to do an radial out transition (http://ianlunn.github.io/Hover/). This css is originally meant for a button. I wanna apply it to a whole div. This is no problem since I can just give this class to a div. However, if you place your mouse anywhere in the div the transition starts. There is also a button inside the div. I wanna start the transition when you hover over the button only i've got no clue on how to accomplish this. Is there anyone the can push me in the right direction?

Div code:

        <div id="intro"> 
        <div class="hvr-radial-out">
            <div class="row">
                <div class="col-lg-12"><p align="center"><img src="img/logo-full.png" class="img-responsive" alt="Logo Full"></p></div>
                <div class="col-lg-12"><p align="center"><a href="" class="btn-intro btn-outlined-intro btn-theme-intro" data-wow-delay="0.7s">Ontdek!</a></p></div>
            </div> 
        </div>       
    </div>

Transition Code:

.hvr-radial-out {
height:100vh;
width:100vw;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
background: #ffffff;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e1e1e1;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}

Button Code:

btn-intro {
letter-spacing: 1px;
text-decoration: none;
background: none;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
white-space: nowrap;
font-size:14px;
line-height:20px;
font-weight:700;
text-transform:uppercase;
border: 3px solid;
padding:15px 20px;
}
 .btn-outlined-intro {
border-radius: 0;
-webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
        transition: all 0.3s;
}
.btn-outlined-intro.btn-theme-intro {
background: none;
color: #000000;
border-color: #000000;
width:220px;
}
.btn-outlined-intro.btn-theme-intro:hover,
.btn-outlined-intro.btn-theme-intro:active {
color: #FFFFFF;
background: #000000;
border-color: #000000;
}
.btn-sm-intro{
font-size:12px;
line-height:16px;
border: 2px solid;
padding:8px 15px;
}

Since [there is no CSS parent selector](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector), you can not trigger the animation on the surrounding div when the button inside it is hovered. You need to either use JavaScript, or chose a different HTML structure that allows to select the div when the button is hovered (so basically have the button before the div in the DOM in some way.) — CBroe, May 09 '15 at 15:16
@Arjen are you able to provide a working example of this? Such as a jsfiddle? — Jordan, May 09 '15 at 16:03
@Jordan here you go http://jsfiddle.net/sLz79x8q/ As you can see the gray radial happends a soon as you hover the mouse inside the div. I want it to happen when you hover the "Ontdek" button while the "Ontdek" button keeps it's original effect. — Arjen, May 09 '15 at 17:04

CSS Transition on div when hovering over a button

0 Answers0