CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Flex
Flex

Reputation: 73

How can I rotate the image in css when it is outside of ul li list

It seems very easy for others but I can't figure it out. I want to rotate the image which is outside of ul list when hover on li > a. Thank you in advance.

<div class="container">               
     <ul id="mylist" data-angle="all">
          <li class="item"><a href="#home">A</a></li>
          <li class="item"><a href="#home">B</a></li>
          <li class="item"><a href="#home">C</a></li>
          <li class="item"><a href="#home">D</a></li>
          <li class="item"><a href="#home">E</a></li>
     </ul>
     <a href="#link" class="button">
          <img src="~/assets/logo/compass.png" />
     </a>
</div>

Upvotes: 4

Views: 467

Answers (8)

David Wilkinson
David Wilkinson

Reputation: 5118

Here's a JS solution. As mentioned in my comments, since the image is outside of the list, and the anchor elements you're hovering over within that list aren't siblings or parents of the image of course, I do not think it's possible to target the image based on the hovering of the anchor elements in your markup with just pure CSS.

var els = document.getElementsByClassName("item");
for(var i = 0; i < els.length; i++) {
  var btnImg = document.getElementById("rotateImg");
  els[i].addEventListener("mouseover", function() {
    btnImg.className += " rotate";
  }, false);
  els[i].addEventListener("mouseout", function() {
    btnImg.classList.remove("rotate");
  }, false);
}
#rotateImg {
  transition: transform 1s linear;
}
#rotateImg.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
<div class="container">               
     <ul id="mylist" data-angle="all">
          <li class="item"><a href="#home">A</a></li>
          <li class="item"><a href="#home">B</a></li>
          <li class="item"><a href="#home">C</a></li>
          <li class="item"><a href="#home">D</a></li>
          <li class="item"><a href="#home">E</a></li>
     </ul>
     <a href="#link" class="button">
          <img id="rotateImg" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRs5uw4irxGko9F06bx4-M7T8eka0R0PK79NAj2rigANKGhQs_BGwAvZg0" />
     </a>
</div>

The above JS loops through each instance of an anchor element within each list item and adds event listeners to each (hover and no hover). If a user hovers over an anchor element, the image which is outside the list rotates 180 degrees. Once the user moves their mouse away from the anchor element, the class is removed.

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39342

It is not possible to target that image in css however with jQuery you can do it as follows:

$(function() {
  $('#mylist li a').hover(function() {
    $('#rotateImg').toggleClass('rotate');
  });
});
#rotateImg {
  transition: transform 0.25s ease;
}

.rotate {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">               
     <ul id="mylist" data-angle="all">
          <li class="item"><a href="#home">A</a></li>
          <li class="item"><a href="#home">B</a></li>
          <li class="item"><a href="#home">C</a></li>
          <li class="item"><a href="#home">D</a></li>
          <li class="item"><a href="#home">E</a></li>
     </ul>
     <a href="#link" class="button">
          <img id="rotateImg" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRs5uw4irxGko9F06bx4-M7T8eka0R0PK79NAj2rigANKGhQs_BGwAvZg0" />
     </a>
</div>

Upvotes: 1

roraima
roraima

Reputation: 637

You can try with JQuery solution maybe with combination with green sock animation platform, which has great browser support and it is fairly easy to use for some animation. 

var $box = $('.item a'),
  $image = $('#image');

$box.hover(
  function() {
    TweenLite.to($image, 1, {
      rotation: 360
    });
  },
  function() {
    TweenLite.to($image, 1, {
      rotation: 0
    });
  }
);
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
   
<div class="container">
  <ul id="mylist" data-angle="all">
    <li class="item"><a href="#home">A</a></li>
    <li class="item"><a href="#home">B</a></li>
    <li class="item"><a href="#home">C</a></li>
    <li class="item"><a href="#home">D</a></li>
    <li class="item"><a href="#home">E</a></li>
  </ul>
  <img id="image" src="~/assets/logo/compass.png" />
</div>

Upvotes: 0

GibboK
GibboK

Reputation: 73938

The following script, rotate an image after hovering one a elements.

How does it work:

  • find all a elements within li
  • add to each a element an event listener mouseover
  • when mouseover is fired
  • get image to be rotated
  • apply css rotation on image so it will appear rotated

var rotateImage = function() {
  // rotate image adding css
  var img = document.getElementById('img');
  img.classList.add('rotate');
};
// find out all a elements
var elms = document.querySelectorAll('li > a');
for (var i = 0, len = elms.length; i < len; i++) {
  var elm = elms[i];
  elm.addEventListener('mouseover', function() {
    // listen to mouseover on each a element, if fired rotate image
    rotateImage();
  }.bind(this))
}
.rotate {
  transform: rotate(15deg);
}
<div class="container">
  <ul id="mylist" data-angle="all">
    <li class="item"><a href="#home">A</a></li>
    <li class="item"><a href="#home">B</a></li>
    <li class="item"><a href="#home">C</a></li>
    <li class="item"><a href="#home">D</a></li>
    <li class="item"><a href="#home">E</a></li>
  </ul>
  <a href="#link" class="button">
    <img id="img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  </a>
</div>

Upvotes: 0

Sagar Kumar
Sagar Kumar

Reputation: 1

<html>
<head>
	<title>Rotate image</title>
	<style type="text/css">
	.rotate
	{
		transform:rotate(90deg);
	}
       .images
        {
                margin-top:10px;
        }
	</style>
</head>
<body>
	<div class="images">
		<img src="http://placehold.it/70x70" height="70px" width="70px">
	</div>

	<div class="images">
		<img src="http://placehold.it/70x70" class="rotate" height="70px" width="70px">
	</div>
</body>
</html>

Upvotes: 0

Sagar Kumar
Sagar Kumar

Reputation: 1

<html>
<head>
	<title>Rotate image</title>
	<style type="text/css">
	.rotate
	{
		transform:rotate(90deg);
	}
	</style>
</head>
<body>
	<div>
		<img src="http://placehold.it/70x70" height="200px" width="200px">
	</div>

	<div>
		<img src="http://placehold.it/70x70" class="rotate" height="200px" width="200px">
	</div>
</body>
</html>

Upvotes: 0

Sagar Kumar
Sagar Kumar

Reputation: 1

<html>
<head>
	<title>Rotate image</title>
	<style type="text/css">
	.rotate
	{
		transform:rotate(90deg);
	}
	</style>
</head>
<body>
	<div>
		<img src="Penguins.jpg" height="200px" width="200px">
	</div>

	<div>
		<img src="Penguins.jpg" class="rotate" height="200px" width="200px">
	</div>
</body>
</html>

Upvotes: -1

Relisora
Relisora

Reputation: 1183

You can do it with CSS :

li > a:hover a > img {transform: rotate(7deg);}

When you are hover your a that is inside li your image will rotate

Upvotes: 0

Related Questions