How do I prevent this double hover? - html

Question

I have used a CSS3 effect where the black box scales to 0.25 to the top-left corner on a mouse hover.
The problem I face here is that once hovered, the animation starts and if the mouse pointer is still within range of the black box (and get hovered), the animation again restarts from the existing point. This prevents a smooth transition. How can this be solved?
This link contains the black box
Below is the code. Note that the black box is wrapped in the CSS clas 'image-effect'.
.image-effect {
animation-name: slideUp;
transition: all 0.5s;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
.image-effect:hover {
transform: scale(0.25) ;
transform-origin: top left;
overflow: hidden;
}
Thanks in advance.

Answer 1

You need to add a parent element that contains the hover, but does not transform. Your CSS would end up looking something like this:
.parent-element:hover .image-effect {
transform: scale(0.25) ;
transform-origin: top left;
overflow: hidden;
}

Answer 2

Check out this fiddle http://jsfiddle.net/7wdqmhrd/
Target an inner div element with the effect instead like the following :
.image-effect div {
animation-name: slideUp;
transition: all 0.5s;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
.image-effect:hover div {
transform: scale(0.25);
transform-origin: top left;
overflow: hidden;
}
Hope it helps!

Answer 3

1) Add an inner div tag
<div class="image-effect">
<div> // Beginning Tag Added
<img class="size-full wp-image-225 alignleft" src="http://albion123.byethost7.com/creative/wp-content/uploads/2015/01/bg11.png" alt="bg1" data-id="225">
</div> // Ending Tag Added
</div>
2) Just add a div tag to both your classes
.image-effect div
.image-effect:hover div
Because you are wanting to move the inner div.