Rotate the image as you hover your cursor over it

I am trying to implement a script where the image is rotated when the user hovers over it. Unfortunately, the hovering effect is not functioning as expected.

$("#alcazar-image").rotate({
  bind:
  {
    mouseover : function() {
    $(this).rotate({animateTo:180})
  },
  mouseout : function() {
    $(this).rotate({animateTo:0})
    }
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryrotate.com/js/jQueryRotateCompressed.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row">
          <div class="media">
            <div class="media-left media-middle">
                <a href="#">
                    <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar">
                </a>
            </div>
            <div class="media-body">
                <div class="media-heading"><h3>Alcazar Park</h3></div>
                <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a></p>   
            </div>
              
            </div>  
    </div>

Any suggestions on how to fix this issue would be greatly appreciated!

Regards,

Theo.

jquerycsstwitter-bootstrap-3hover

Answer №1

Achieving the desired effect here does not require JavaScript or jQuery.

All you need is a simple CSS transform: rotate property.

img:hover {
  transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
  transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryrotate.com/js/jQueryRotateCompressed.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row">
  <div class="media">
    <div class="media-left media-middle">
      <a href="#">
        <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar">
      </a>
    </div>
    <div class="media-body">
      <div class="media-heading">
        <h3>Alcazar Park</h3>
      </div>
      <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a>
      </p>
    </div>

  </div>
</div>

Answer №2

Applying this effect with CSS is a great technique.

img{
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;


}
img:hover{
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

Answer №3

Almost perfect, just remember to add jquery and the jquery-rotate plugin to your code snippet. You can experiment with the following code:

$("#alcazar-image").rotate({
  bind: {
    mouseover: function() {
      $(this).rotate({
        animateTo: 180
      })
    },
    mouseout: function() {
      $(this).rotate({
        animateTo: 0
      })
    }
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/wilq32/jqueryrotate/master/jQueryRotate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row">
  <div class="media">
    <div class="media-left media-middle">
      <a href="#">
        <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar">
      </a>
    </div>
    <div class="media-body">
      <div class="media-heading">
        <h3>Alcazar Park</h3>
      </div>
      <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a>
      </p>
    </div>

  </div>
</div>

Answer №4

Simply update your jQuery code with the following:

$("#alcazar-image").hover(function() {
    $(this).css('transform', 'rotate(180deg)');
    $(this).css('-ms-transform', 'rotate(180deg)'); /* IE 9 */
    $(this).css('-webkit-transform', 'rotate(180deg)'); /* Chrome, Safari, Opera */
}, function() {
    $(this).css('transform', 'rotate(0deg)');
    $(this).css('-ms-transform', 'rotate(0deg)'); /* IE 9 */
    $(this).css('-webkit-transform', 'rotate(0deg)'); /* Chrome, Safari, Opera */
});

This updated code snippet will ensure compatibility across all browsers.

Answer №5

To add some flair to your website, I recommend utilizing the .hover() event combined with a rotate effect:

$("#alcazar-image").hover(function() {
  $(this).toggleClass("rotate-180");
});

Check out the JsFiddle demo for a live example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving all the information stored in the tables

I'm struggling with retrieving the content of my table cells. Some cells contain a hyphen (-) and if they do, I want to center the text. I'm facing difficulties with my jQuery code, particularly the if statement which always evaluates to false. ...

javascriptjquery

Is there a way for me to display a gif similar to 9GAG on my

I'm looking to implement a feature on my website that allows me to pause and play a gif, similar to the functionality on 9gag. Can anyone provide guidance on how I can achieve this? I understand that I need to use both .jpg and .gif files, but my at ...

javascriptjqueryhtmlcss

Tips for ensuring the vertical scroll bar is always visible on a div element

I need help with maintaining a vertical scroll bar on a div regardless of its height. .myclass { overflow-y: scroll; } <div class="myclass"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the in ...

javascripthtmljquerycss

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

csstwitter-bootstrap

Steps to display a temporary placeholder image while waiting for the main image to load

Displaying the second image upon hovering over the first image is the goal here. The path to the second image is stored in data-alt-src To achieve this, a function has been created to swap the src attribute of the img tag with the data-alt-src value for d ...

jquerylazy-loading

Transfer a term to a different division - JavaScript Object Model

I am trying to achieve a specific task where I need to move one term under another in SharePoint. However, despite my efforts using JSOM and SharePoint 2013, I have not been able to find a direct method for moving terms. The code snippet I have used below ...

javascriptjquerygitsharepointsharepoint-online

Learn the steps to successfully rotate the custom icon in Material-Ui select without impacting its functionality and making sure it remains clickable

I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select. However, I'm facing issues with the new icon not rotating when the menu ...

javascriptcsssvgmaterial-uiicons

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

javascriptjqueryhtml

Submitting data from a dropdown menu using Ajax in Struts 2: A step-by-step guide

I have a select tag with the s:select element inside a form. My goal is to send a post request to the specified action using Struts 2 json plugin. I do not have much knowledge in javascript or jquery. <s:form action="selectFileType" method="post" ...

javascriptjqueryjsonstruts2

Would it be expected for these two JQuery functions to exhibit identical behaviors?

If I have the following two JQuery functions - The first one is functional: $("#myLink_931").click(function () { $(".931").toggle(); }); The second one, however, does not work as expected: $("#myLink_931").click(function () { var class_name = $(thi ...

javascriptjquery

Restrict the option to select checkboxes

Can anyone help with limiting checkbox selection? This is the code I currently have... foreach($res as $res) echo '<div class="ediv"><input type="checkbox" class="echeck" name="pr[]" value="'.trim($res['product']).'" ...

javascriptphpjquery

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

I'm currently facing a challenge with creating a dynamic HTML template. In order to present data in a table, I need to distinguish between a regular String and an Array. Firstly, the HTML template is embedded within another template using the data-ng- ...

javascriptjqueryhtmlangularjsarrays

The issue with the second child of the nested datatable in Jquery is not

Within my project, I have implemented a jQuery nested datatable which includes two child rows for each row. Below is the code snippet that demonstrates this: $(function(){$(document).on('click','#tab td.control', function(){ var ...

jquerydatatables

Ajax mode in Mvcpaging is malfunctioning

Having some trouble with getting MvcPaging to work in Ajax mode. It seems that it's not behaving as expected - instead of making an Ajax call, it's doing a full GET request. When checking the controller code, I noticed that Request.IsAjaxRequest( ...

jqueryajaxpaging

What is the best way to mirror an image using CSS3?

I'm looking to create a minimalist front page for my wife's jewelry website. I envision a simple layout with a blurred background and a sleek title at the top. In the center of the page, there will be several sections dedicated to different types ...

htmlcss

Steps to display the datatable footer on the printed page

I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...

javascriptjqueryhtml

Arrange 4 divs (children) at each corner of the parent element

Currently, I am facing a challenge in positioning 4 divs in the corners of their parent div. The HTML code structure is as follows: <div class="resize"> <div class="n w res"></div> <div class="n e res"></div> < ...

htmlcss

Ways to activate a different jQuery event by utilizing the output from a previously run jQuery event

I have a button on my website that looks like this: <a id="btn" class="button">Click Me!</a> When this button is clicked, it triggers a jQuery function as shown below: $("#btn").on("click", function() { $.ajax({ url: 'index.php&ap ...

javascriptjquery

I am experiencing an issue with the LinkedIn Javascript API where it is not providing the

Could it be that the endDate of positions is causing the script to hang? function importJobsEducation() { IN.API.Profile("me") .fields(["id","positions:(company,title,summary,start-date,end-date,is-current)", "educations","skills", "headline"]) ...

jqueryajaxjsonapilinkedin-api

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

Can this carousel be configured to show just 2 pictures at a time instead of 3? Check out the live demo here. I've attempted adjusting the columns to col-md-6 and the CSS to 50%, but haven't had any success... ...

jquerycsstwitter-bootstrap-3carousel