How to make image control button for each image inside the div using css and js?

Question

how to make image control button like close, resize, rotate button for each images on hover . There is a div in which each image is draggable.

I need to make a image controll button near to each image. That button need to visible only when we touch or moving mouse pointer on the image, that is the button need to show in it's hover effect.

This is my HTML

$( function() {
  var a = 1;
  $( ".child" ).draggable({
    containment: "parent",
    start: function(event, ui) { $(this).css("z-index", a++); }
  }).hover(function(){
    $(this).prepend('<button class="remove"></button>');
  }, function(){
    $(this).find('.remove').remove();
  }).on('click', '.remove', function(){
    $(this).closest('.child').remove();
  });
});

.parent{
  z-index:1;
  min-height: 200px;
  background-image: url('http://img.freepik.com/free-vector/white-canvas-background_1053-239.jpg?size=338&ext=jpg');
}
.child{
  position: absolute;
  z-index:1;
}

.remove{
  position: absolute;
  top: 0px;
  right: 0px;
  display:block;
  box-sizing:border-box;
  width:20px;
  height:20px;
  border-width:3px;
  border-style: solid;
  border-color:red;
  border-radius:100%;
  background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
  background-color:red;
  box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="parent">
  <div class='child'>
    <img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
  </div>
  <div class='child'>
    <img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
  </div>
  <div class='child'>
    <img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' />
  </div>
</div>

https://jsfiddle.net/felixtm/x3xb2jwf/7/

i need output like this

i don't need the cross line and border box , just 3 buttons in three corner one for close one for resize one for rotate

Close button already implemented . For rotation i know the code

var rotation = 0;
var rotating = false;
var startX = 0;

jQuery.fn.rotate = function(degrees) {
   $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$(document).mousemove(function(e){                
   if (!rotating) return;
   rotation = startX - e.clientX;
   $('.child').rotate(rotation);      
});

$(document).on("mouseup", function(){
   rotating = false;
});

 $('.rotateButton1').on("mousedown", function(e) {
   e.stopImmediatePropagation();
   rotating = true;
   startX = e.clientX;
});

Please help to implement these three buttons and functionality with this image . Thank you .

startX and endX from a mouse coordinate is used as rotation? that's wrong! Trigonometry Felix! — Roko C. Buljan
– Roko C. Buljan, Commented Oct 30, 2016 at 12:34
Could you please help to solve this , solve this entire question ?. Thank you . — user5844810
– user5844810, Commented Oct 30, 2016 at 12:36
Sorry but where is your .rotateButton1? You should create a minimal reproducible example that reflects your issue. — Roko C. Buljan
– Roko C. Buljan, Commented Oct 30, 2016 at 15:14
This may help you. You have to fine tune it on your own ;-) jsfiddle.net/x3xb2jwf/9 — Artur Filipiak
– Artur Filipiak, Commented Oct 30, 2016 at 15:58

Artur Filipiak · Accepted Answer · 2016-10-31 13:38:58Z

1

For resizing, use .resizable() method of jQuery UI
For rotation, use jquery-ui-rotatable plugin.

.draggable() and .rotatable() apply to .child elements and .resizable() directly to images.

<div class="parent">
  <div class='child'>
    <img class='child2' src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
  </div>
  <div class='child'>
    <img class='child2' src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
  </div>
  <div class='child'>
    <img class='child2' src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' />
  </div>
</div>

jQuery:

var a = 1;

$( ".child" )
  .rotatable()
  .draggable({
    containment: "parent",
    start: function(event, ui) { $(this).css("z-index", a++); }
  })
  .hover(function(){
    $(this).find('.ui-rotatable-handle, .ui-resizable-handle, .remove').show();
  }, function(){
    $(this).find('.ui-rotatable-handle, .ui-resizable-handle, .remove').hide(); 
  })
  .append('<button class="remove"></button>')
  .on('click', '.remove', function(){
    $(this).closest('.child').remove();
  })
  .find( ".child2" ).resizable({
    // to keep aspect ratio:
    aspectRatio : true
  })
  // hide control handles:
  .trigger('mouseleave');

JSfiddle Demo

edited Oct 31, 2016 at 13:38

answered Oct 31, 2016 at 13:15

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5844810 Over a year ago

Thank you friend .

user5844810 Over a year ago

hi, could you please check this question stackoverflow.com/questions/40342500/…

Collectives™ on Stack Overflow

How to make image control button for each image inside the div using css and js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related