diff --git a/editable-image.js b/editable-image.js index a9871de..f263146 100644 --- a/editable-image.js +++ b/editable-image.js @@ -26,15 +26,19 @@ class EditableImage extends IgniteElement { mt-editable-image:hover:after { position: absolute; - font-family: 'Font Awesome 5 Duotone'; + font-family: 'Font Awesome 5 Pro'; font-weight: 900; content: '\\f332'; - color: rgba(0,0,0,0.5); - font-size: 2.5em; + color: #fff; + font-size: 2.2em; + display: flex; + align-items: center; + justify-content: center; } mt-editable-image:hover { cursor: pointer; + filter: brightness(0.9); } `; } @@ -56,7 +60,8 @@ class EditableImage extends IgniteElement { new img() .src(this.source) .style("object-fit", this.objectFit) - .style("object-position", this.objectPosition), + .style("object-position", this.objectPosition) + .hide(this.source, value => { return value == null; }), new input() .type("file") .style("display", "none", true)