Buttons coming while hover over an image - html

Question

I want that when I move my cursor on an image, it should show 3 buttons coming and then when I click on any one of them, a modal should open. I am actually done with this, but the problem is when I click on any of the buttons appearing, a modal is reflected and as soon as I try to close that modal, those three options are shown on that image rather dis-appearing. Please anyone help.
Here is the code:
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
<button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
<button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
<button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
</div>
<img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
</div>
<h3 class="text" id="D1"><b>Department Options </b></h3>
</div>
</div>
<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw">Department Name</label>
<input type="text" class="form-control" id="psw" placeholder="Provide a name">
</div>
<div class="form-group">
<label for="usrname">Department ID</label>
<input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
</div>
<button type="submit" class="btn btn-block">Submit
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need help?</p>
</div>
</div>
</div>
</div>

Answer 1

If you simply wanna hide those buttons whenever the modal is closed, then its a cakewalk if you use jQuery. You just need to use the hidden.bs.modal event of Bootstrap modals in the following way:
$('#myModal1a').on('hidden.bs.modal', function () {
$('.imgButton').each(function () {
$(this).hide();
})
})
Assuming that you provide a class called 'imgButton' to all the buttons :)