CODEWITHSUNDEEP
htmlcss
Muhammad Shifaz
Muhammad Shifaz

Reputation: 5

How do I prevent this double hover?

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.

Upvotes: 0

Views: 208

Answers (3)

Demodave
Demodave

Reputation: 6652

1) Add an inner div tag

<div class="image-effect">
    <div> // Beginning Tag Added
        <a href="http://albion123.byethost7.com/creative/wp-content/uploads/2015/01/bg11.png"><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"></a>
    </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.

Upvotes: 0

Jako Basson
Jako Basson

Reputation: 1531

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!

Upvotes: 2

methodofaction
methodofaction

Reputation: 72435

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;
}

Upvotes: 2

Related Questions