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

Answer 1

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) .

Answer 2

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%);