Make thumb buttons only visible on mouseover

This commit is contained in:
Oliver Walters 2020-02-11 00:28:46 +11:00
parent e0e996a6c3
commit 8ea1086b03
2 changed files with 17 additions and 3 deletions

View File

@ -229,6 +229,20 @@
object-fit: contain;
}
.part-thumb-container:hover .part-thumb-overlay {
opacity: 1;
}
.part-thumb-overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: .25s ease;
padding: 15px;
margin: 5px;
}
.checkbox {
margin-left: 20px;
}

View File

@ -2,7 +2,7 @@
{% load i18n %}
<div class="media">
<div class="media-left">
<div class="media-left part-thumb-container">
<div class='dropzone' id='part-thumb'>
<img class="part-thumb"
{% if part.image %}
@ -11,9 +11,9 @@
src="{% static 'img/blank_image.png' %}"
{% endif %}/>
</div>
<div class='btn-row'>
<div class='btn-row part-thumb-overlay'>
<div class='btn-group'>
<button type='button' class='btn btn-default btn-glyph' title="{% trans 'Select from existing images' %}" id='part-image-select'><span class='glyphicon glyphicon-edit'></span></button>
<button type='button' class='btn btn-default btn-glyph' title="{% trans 'Select from existing images' %}" id='part-image-select'><span class='glyphicon glyphicon-th'></span></button>
<button type='button' class='btn btn-default btn-glyph' title="{% trans 'Upload new image' %}" id='part-image-upload'><span class='glyphicon glyphicon-upload'></span></button>
</div>
</div>