Hover transitions with absolute elements - html

Question

I have an image with an absolutely positioned link centered on top of it. I have transition effects when the image is hovered over, but they are lost when the link is hovered over.
HTML
<div class="imagediv">
<img src="#">
Text
</div>
CSS
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv img:hover{
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
How can I make it so my effects on image hover are retained on link hover?

Answer 1

Change your CSS selector to trigger when the .imagediv is hovered not the img itself.
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}

Answer 2

If you are able to switch the order of the img text elements, you could use the general sibling selector, but it only works with folowing siblings
a:hover ~ img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv img:hover{
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a:hover ~ img {
transform: scale(1.2);
filter: grayscale(50%);
}
<div class="imagediv">
Text
<img src="#">
</div>
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv img:hover{
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 3

A couple of things to fix:
You should move the :hover style to container.
The container should be set to relative position, so that the absolute link can be centered inside, otherwise the offsets will be relative to the viewport.
.imagediv {
display: inline-block;
position: relative;
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="imagediv">
<img src="//unsplash.it/200">
Text
</div>
If you need the entire block to be clickable, you can use flexbox.
.imagediv {
display: inline-block;
position: relative;
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
<div class="imagediv">
<img src="//unsplash.it/200">
Text
</div>

Answer 4

Use :hover on the imagediv
.imagediv {
position: relative; /* added so link position relates to imagediv */
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
color: white;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="imagediv">
<img src="http://placehold.it/600x100/f00">
Text
</div>