Rotation button on hover

Question

So I'm looking to make an image rotate button appear on hover. I thought I had the idea down with some CSS, but I must have done it incorrectly. See my fiddle here: Fiddle

Thanks in advance

CSS

body {
    font-family: sans-serif;
}

#foo {
    width:100px;
    height:100px;
    position:absolute;
    top:20px;
    left:20px; 
    border-spacing: 0;
    background:none;
    transition: all 1s ease;
}

button {display:none;}

#foo img {width:100%;}
  #foo img:hover button {display: block;}

JS

function rotateFoo(){
    var angle = ($('#foo').data('angle') + 1080) || 1080;
    $('#foo').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#foo').data('angle', angle);
}

the answer here should help, just remove the infinite attribute http://stackoverflow.com/questions/16771225/css3-rotate-animation — flapjack17, May 04 '16 at 18:05

score 5 · Accepted Answer · answered May 04 '16 at 18:06

Add the following rules

#foo:hover + button, button:hover {
  display: block;
  position: relative;
  left: 50px;
  top: 50px
}

JSFiddle.

You can adjust the left and top position suitable to your needs, but you should note that the button must be on top of the button.

score 1 · Answer 2 · answered May 04 '16 at 18:11

1

You can use .hover() if you need js logic -> https://api.jquery.com/hover/

answered May 04 '16 at 18:11

dodo121

114
1
5

This would also do. Thanks for your answer @dodo121 – Huginn May 04 '16 at 18:17

score 1 · Answer 3 · answered May 04 '16 at 18:16

1

Since you are already using JQuery, would this solution work for yo https://jsfiddle.net/6sw9yrmk/13/

$(document).ready(function() {
  $(document).on('mouseenter', '.divbutton', function() {
    $(this).find(":button").show();
  }).on('mouseleave', '.divbutton', function() {
    $(this).find(":button").hide();
  });
});

answered May 04 '16 at 18:16

Adam Buchanan Smith

9,422
5
19
39

This option would work too, minus the button rolling with it. Still giving you a 1up – Huginn May 04 '16 at 18:21

Rotation button on hover

3 Answers3