通过将鼠标悬停在单独的元素上来触发CSS动画

Question

I'm attempting to create a small animation on an image (the image grows slightly) when a link is hovered over using only CSS3 animations.

The relevant snippets from my code

HTML:

<img id="enterimg" src="img.png" alt="" />
<a id="enterbutton" href="home.php">Enter</a>

CSS:

#enterimg {
  width: 350px;
  height: 350px;
  -webkit-transition: width 1s ease-out, height 1s ease-out;
  -moz-transition: width 1s ease-out, height 1s ease-out;
  -o-transition: width 1s ease-out, height 1s ease-out;
  transition: width 1s ease-out, height 1s ease-out;
}

a:hover ~ #enterimg{width:400px;height:400px;}

I'm sure the transitions themselves are correct, but none of the different "calls" (the last line of CSS) I've tried have worked.

(This is similar to a number of other questions, but I've looked through them and as far as I can tell none of them answer my question)

Answer 1

Thanks to Lokesh Suthar.

The order of the sibling selector required I placed the link first in the markup. Since the selection was written:

a:hover ~ #enterimg{width:400px;height:400px;}

The markup needed to be in that order

<a id="enterbutton" href="home.php">Enter</a>
<img id="enterimg" src="img.png" alt="" />

Answer 2

If you wrap the content in the trigger, then position the content absolutely, you can achieve something similar to triggering a sibbling with CSS. At least it'll look and act that way.

HTML

<a href="">Click Me
    <img id="enterimg" src="http://www.druglessdrs.com/wp-content/uploads/2012/07/google-logo-small.jpg" alt="" />
</a>

CSS

a img {
    display:block;
    position:absolute;
    top:80px;
    left:0;
    border:solid 1px black;
    -webkit-transition: width 1s ease-out, height 1s ease-out;
    -moz-transition: width 1s ease-out, height 1s ease-out;
    -o-transition: width 1s ease-out, height 1s ease-out;
    transition: width 1s ease-out, height 1s ease-out;
}

a:hover img {
    left:50px;
}

Fiddle