You need to animate an element in CSS. It is necessary to make it so that when you hover over the text, the image that rotates before the text. A picture is a text . Direct the cursor to the text and the picture makes a complete rotation around the axis.

.img { top: -10px; right: -10px; padding: 0; width: 20px; height: 20px; border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; } .text:hover ~ .img { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }

Currently it works only if the picture comes after the text. If you put the text - the picture - then everything works. Here is the html code:

 <img class="img" src="/images/copy.jpg" alt="Не работает" /> <p class="text">123</p> <img class="img" src="/images/copy.jpg" alt="Работает" />

Ideally, do this:

 <a class="text" href=""> <img class="img" src="/images/copy.jpg" alt="Имя" />Сообщение</a>

That is, to make it so that when you hover over a link, the image that is in it is scrolled. In this case, the text itself is in place.

    1 answer 1

    CSS, unlike jQuery, does not know how to "go up the code", only down. Therefore, both + and ~ select only the next element (the plus sign is in a row, the tilde is not in a row).

    Source and possible crutches: https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector

    The normal solution is to wrap both the image and the text in one element, for example, <a> :

     .img { top: -10px; right: -10px; padding: 0; width: 20px; height: 20px; border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; } .text:hover > .img { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } 
     <a class="text" href=""> <img class="img" src="/images/copy.jpg" alt="Имя" />Сообщение</a>

    http://jsfiddle.net/qkfLr1oa/

    • well, is it possible to make the picture in the link rotate? <a class="text" href=""> <img class = "img" src = "/ images / copy.jpg" alt = "Name" /> Message </a> - anj1817
    • Done, added in response. - Sergey Snegirev
    • The answer is correct, but I did not understand where I was mistaken. My mistake was not using>? So what? - anj1817 pm
    • The mistake was that both elements were siblings, i.e. were at the same level: <img><p>текст</p> , so we could not rotate the <img> we need, knowing <p> . Then we changed the code to: <a><img>текст</a> , i.e. the picture became child , i.e. nested element. Knowing the <a> we need, we can easily animate its <img> child element. Once again: you cannot select the previous element at the same level through CSS. You can select a nested item or the next one at the same level . - Sergey Snegirev