CSS : animating another div with ~ or + on div element hover

Question

I've tried many approaches to get this working correctly, but with no success.. I notice that this question has been asked a few times already, and i've tried the solutions i've found.. but with no success..

So i'll upfront say sorry if someone of you find this question as a duplicate :(

The hovered element is "food-box", and the element which needs the scale-animation is "food-box-image" :

 <div class="food-box">
        <div class="food-box-image" style="background-image: url(myimage.jpg);"></div>

... and i'm trying to get the animation working like this :

 .food-box:hover ~ .foox-box-image {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
  border:8px solid red;
}

but it will not fire :

the only way i got it working, is with specifying .food-box-image:hover, but then it will not fire when hovering the needed div element..

Here's complete code (which runs) :

Anyone know how to do this ?

 .fixedbuttons-container { position: absolute; width: 100%; } .buttons, .fixedbuttons { display: flex; flex-flow: row wrap; } .fixedbuttons > * { width: 25%; } .fixedbuttons > * > * { width: 100%; text-align: center; } .food-box-container { padding: 10px; } .food-box { flex: 1; position: relative; background-color: white; min-height: 300px; background-color: #ffffff; -webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); border-color: #666666; border: 1px solid #666666; word-wrap: break-word; margin: 0 !important; padding: 0 !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover { cursor: pointer; -webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover ~ .foox-box-image { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); border:8px solid red; } .food-box .food-box-image { position: absolute top: 0 left: 0; background-size: cover; width: 100%; min-height: 150px; background-color: #ffffff; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .food-box .food-box-content { -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; position: absolute bottom: 0 left: 0; word-wrap: break-word; width: 100%; min-height: 150px; background-color: #ffd531; color: #000000; font-size: 80%; padding-top: 60px; padding-left: 5px; padding-right: 5px; } .food-box:hover > .food-box .food-box-content { background: yellow !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box .food-box-badge { display: table; background: #ffffff !important; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; line-height: 100px; border-radius: 50%; font-size: 12px; color: #000000; text-align: center; -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); border-color: #d3e0e9; border: 1px solid #b3c9e5; padding-left: 10px; padding-right: 10px; } .food-box .food-box-badge span { color: #666; display: table-cell; vertical-align: middle; line-height: 1.2em; word-wrap: break-word; } 

 <div class="fixedbuttons-container"> <div class="fixedbuttons"> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> </div </div> 

Answer 1

The first is the typo foox* to be replaced with .food-box:hover > .foox-box-image as pointed out by @panther

Now if you want to only scale within the container box apply overflow: hidden to the wrapping container which is food-box

Hope this is what you are expecting.

 .fixedbuttons-container { position: absolute; width: 100%; } .buttons, .fixedbuttons { display: flex; flex-flow: row wrap; } .fixedbuttons > * { width: 25%; } .fixedbuttons > * > * { width: 100%; text-align: center; } .food-box-container { padding: 10px; } .food-box { overflow: hidden; flex: 1; position: relative; background-color: white; min-height: 300px; background-color: #ffffff; -webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); border-color: #666666; border: 1px solid #666666; word-wrap: break-word; margin: 0 !important; padding: 0 !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover { cursor: pointer; -webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover > .food-box-image { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .food-box .food-box-image { position: absolute top: 0 left: 0; background-size: cover; width: 100%; min-height: 150px; background-color: #ffffff; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .food-box .food-box-content { -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; position: absolute bottom: 0 left: 0; word-wrap: break-word; width: 100%; min-height: 150px; background-color: #ffd531; color: #000000; font-size: 80%; padding-top: 60px; padding-left: 5px; padding-right: 5px; } .food-box:hover > .food-box .food-box-content { background: yellow !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box .food-box-badge { display: table; background: #ffffff !important; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; line-height: 100px; border-radius: 50%; font-size: 12px; color: #000000; text-align: center; -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); border-color: #d3e0e9; border: 1px solid #b3c9e5; padding-left: 10px; padding-right: 10px; } .food-box .food-box-badge span { color: #666; display: table-cell; vertical-align: middle; line-height: 1.2em; word-wrap: break-word; } 

 <div class="fixedbuttons-container"> <div class="fixedbuttons"> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> </div </div>