diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 6dc6ad4822..6c89ff7265 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -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; } diff --git a/InvenTree/part/templates/part/part_thumb.html b/InvenTree/part/templates/part/part_thumb.html index e99b5106c0..04efdd383f 100644 --- a/InvenTree/part/templates/part/part_thumb.html +++ b/InvenTree/part/templates/part/part_thumb.html @@ -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>