Animating a div on hover css - possible loop

Question

Wordpress site using Bootstrap framework

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.linkage:hover + .test {
  opacity: 1;
}

<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');">
  
     <a href="<?php the_permalink(); ?>" class="linkage">Link</a>
    
     <div class="test"> Test </div>
  
  </div>
</div>

Right now my site has the div 'test' show up (opacity 1) vertically/horiz centred when the the link 'linkage' is hovered on (linkage is 100% height and width of the container).

I want to animate the 'test' div as it fades in on hover. I was thinking using scale (on hover the div scales down to its original size then scales up on fade out) or something. Unless anyone has a cooler idea

Is that what you want (minimal example)? jsfiddle.net/lmgonzalves/d33maa33 — lmgonzalves
– lmgonzalves, Commented May 30, 2015 at 2:40
that's basically exactly what I have going right now. I want to add a scale factor, it's being applied to a div with a background image — user3550879
– user3550879, Commented May 30, 2015 at 2:57
Sorry, I had not looked at the fiddle (and your comment) before answering but what is wrong with it? I see the scale happening there. Do you mean you want the factor to be controlled dynamically (or) you want it changed in a non linear way? — Harry
– Harry, Commented May 30, 2015 at 5:06
I don't have any scale transitions it it yet, thats what I want though. '.test' fades in (opacity 0 - 1) but I want it to animate in with scale, like grow/shrink on hover — user3550879
– user3550879, Commented May 30, 2015 at 6:45

Harry · Accepted Answer · 2015-05-30 08:29:43Z

2

It seems like you are looking for something like the below snippet (a transition and not animation). On hover of the link, the .test is being scaled up two times its original size both along X and Y axes and on mouse out it is brought back to its normal size.

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;  /* added as I think this was missed in your code */
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  background: url(http://lorempixel.com/500/500);  /* added for image */
  opacity: 0;
  transition: all 0.5s ease;  /* modified to transition all property changes */

  /* added to scale up the div with the center as the origin */
  transform-origin: 50% 50%;
  transform: translateY(-50%) scaleX(2) scaleY(2);
}
.linkage:hover + .test {
  opacity: 1;
  transform: translateY(-50%) scaleX(1) scaleY(1);  /* bring back to normal state */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');"> 
    <a href="#" class="linkage">Link</a>
    <div class="test">Test</div>
  </div>
</div>

Alternately, you could use matrix transforms also. Equivalent of translateY(-50%) scaleX(2) scaleY(2) would be matrix(2, 0, 0, 2, 0, -101) and that of translateY(-50%) scaleX(1) scaleY(1) would be matrix(1, 0, 0, 1, 0, -101).

edited May 30, 2015 at 8:29

answered May 30, 2015 at 5:02

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3550879 Over a year ago

That's more like it! I'll work it into my code thank you

user3550879 Over a year ago

Unfortunately I spoke to soon, your snippet seems to do what I want, but it doesn't work on my code. The opacity change still works, but the scale isn't affected

Harry Over a year ago

@user3550879: Can you please show a demo of your full code? Also, make sure you have included all the prefixes (I have used prefix free JS library in the answer).

Robert McKee · Accepted Answer · 2015-05-30 03:00:57Z

1

Well this will never be true:

.linkage:hover + .test {
  opacity: 1;
}

as linkage (hovered or not) is not a sibling of test.

.test is absolutely positioned, but has no parent element that is not static. Did you want to to be absolute to the body? You use left/margin to horizontally center, and it looks like you are trying to use translateY to vertically center, but you never specify top. Perhaps consolidating to one method?

top:50%; left:50%; transform: translateX(-50%) translateY(-50%);

answered May 30, 2015 at 3:00

Robert McKee

21.5k1 gold badge48 silver badges64 bronze badges

1 Comment

user3550879 Over a year ago

I apologize, I fixed my code snippet to correct that, I copied it in the wrong place. The snippet is inside an 'article' which has no defined height (it's height is created with 'padding: 15% 0; applied to .index-img'

Collectives™ on Stack Overflow

Animating a div on hover css - possible loop

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related