Animating div on hover css - possible loop
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 displays "test" (opacity 1) vertically / horizontally when the "linkage" is linked (link is 100% container height and width).
I want to animate the 'test' div as it disappears on hover. I was thinking of using a scale (while hovering the weights of the div to its original size and then scaling to fade out) or something. Unless someone has a cooler idea
source to share
You seem to be looking for something like the snippet below (transition, not animation). On hover
links, it is .test
scaled to twice its original size in both the X and Y axes, and it reverts to its normal size when the mouse is displayed.
.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>
Alternatively, you can also use matrix transformations. The equivalent translateY(-50%) scaleX(2) scaleY(2)
will be matrix(2, 0, 0, 2, 0, -101)
and translateY(-50%) scaleX(1) scaleY(1)
will be matrix(1, 0, 0, 1, 0, -101)
.
source to share
Well this will never be true:
.linkage:hover + .test {
opacity: 1;
}
as a binding (hangs or not) is not a sibling of the test.
.test is absolutely positioned but does not have a parent that is not static. Did you want to be absolute for the body? You are using left / marker for the horizontal center, and it looks like you are trying to use translateY in the vertical center, but you will never point to the top. Perhaps consolidating one method?
top:50%; left:50%; transform: translateX(-50%) translateY(-50%);
source to share