html - Stop animation on child div when hover over parent div -

I have a parent of a parent and a child. I have set the CSS animation on parent div but the parent board But the hover is on, the baby's div is also taking the effect that I do not want.

This is my code

  & lt; Div class = "wrap" & gt; & Lt; Div style = "background: url ('http://www.screensavergift.com/wp-content/uploads/GoldenNature2-610x320.jpg') no-repeat; background-position: 25% 50%; background-size: wrapper ; " Class = "menu_item" & gt; & Lt; Div class = "menu-box-limit" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Demo -

I do not want to expand the gold border box.

Any help is highly appreciated. thank you in advanced.

If you are also going to scale your children to the element, I do not believe that around one is the way.

In this case you can make two elements brother-sister instead and add : hover to the wrapping element:

 . Wrap: Hover Menuu_item {-moz-transform: scale (1.1, 1.1); Webkit-Conversion: Scale (1.1, 1.1); Consequently, the scale (1.1, 1.1); }