How can I create image control buttons, such as close, resize, and rotate, for each individual image when hovering over it? Each image is contained within a draggable div.
I want to display an image control button next to each image. This button should only be visible when the mouse hovers over the image, activating its hover effect.
This is the HTML code that I am using:
$( 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 am aiming for an output similar to this https://i.sstatic.net/PKooU.png
I do not need the cross line or border box, just three buttons in the corners for close, resize, and rotate functionalities.
The close button has already been implemented. As for rotation, I have the following 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 assist me in implementing these three buttons along with their respective functionalities for each image. Thank you.