Don't use an image for the close button but draw it. Add a sircle around the close button if it has mouse over.

src/plugins/backends/snore/notification.qml

@@ -7,10 +7,10 @@ Rectangle {
     signal dismissed()
     signal invoked()
 
-    property int snoreMargin: body.font.pixelSize
+    property int snoreBaseSize: body.font.pixelSize
 
-    width: snoreMargin * 30
+    width: snoreBaseSize * 30
-    height: snoreMargin * 9
+    height: snoreBaseSize * 9
 
 
     function update(nTitle, bBody, nImage, nAppIcon, color, textColor, isUpdate)
@@ -70,8 +70,8 @@ Rectangle {
         font.pointSize: body.font.pointSize * 1.5
         font.bold: true
         anchors.top: parent.top
-        anchors.margins: snoreMargin
+        anchors.margins: snoreBaseSize
-        anchors.topMargin: snoreMargin / 2
+        anchors.topMargin: snoreBaseSize / 2
         anchors.left: image.right
         anchors.right: closeButton.left
         textFormat: Text.StyledText
@@ -88,8 +88,8 @@ Rectangle {
         anchors.top: title.bottom
         anchors.bottom: parent.bottom
         anchors.left: image.right
-        anchors.margins: snoreMargin
+        anchors.margins: snoreBaseSize
-        anchors.topMargin: snoreMargin / 2
+        anchors.topMargin: snoreBaseSize / 2
         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
         onLinkActivated: Qt.openUrlExternally(link)
         textFormat: Text.StyledText
@@ -103,7 +103,7 @@ Rectangle {
         width: height
         smooth: true
         anchors.left: parent.left
-        anchors.margins: snoreMargin
+        anchors.margins: snoreBaseSize
         anchors.bottom: parent.bottom
         anchors.top: parent.top
         z: 4
@@ -117,25 +117,56 @@ Rectangle {
         smooth: true
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        anchors.margins: snoreMargin
+        anchors.margins: snoreBaseSize
     }
 
-    Image {
+    Canvas{
         id: closeButton
-        fillMode: Image.PreserveAspectFit
+        height: root.height * 0.25
-        height: root.height * 0.20
+        width: root.height * 0.25
-        width: root.height * 0.20
         anchors.top: parent.top
-        anchors.margins: snoreMargin
+        anchors.margins: snoreBaseSize
         anchors.right: parent.right
         z: 91
-        source: "resources/close.png"
+
-        smooth: true
+        onPaint: {
+            var context = getContext("2d");
+            context.lineWidth = snoreBaseSize * 0.25;
+
+            context.beginPath();
+            context.clearRect(0, 0, width, height);
+            context.fill();
+
+            if(mouseAreaCloseButton.containsMouse)
+            {
+                context.beginPath();
+                context.strokeStyle = root.color
+                context.fillStyle = body.color
+                context.globalAlpha = 0.5
+                context.moveTo(width/2 + width/2 , height/2);
+                context.arc(width/2, height/2, width/2 , 0, 2*Math.PI, true)
+                context.fill();
+                context.stroke();
+            }
+
+            var margin = snoreBaseSize * 0.5
+            context.beginPath();
+            context.globalAlpha = 1
+            context.strokeStyle = body.color
+            context.moveTo(margin, margin);
+            context.lineTo(width - margin, height - margin);
+            context.moveTo(width - margin, 0 + margin);
+            context.lineTo(margin, height - margin);
+            context.stroke();
+        }
 
         MouseArea {
             id: mouseAreaCloseButton
             anchors.fill: parent
             onClicked: root.dismissed()
+            hoverEnabled: true
+            onEntered: parent.requestPaint()
+            onExited: parent.requestPaint()
         }
     }
 }

src/plugins/backends/snore/snore_notification.qrc

@@ -1,6 +1,5 @@
 <RCC>
     <qresource prefix="/">
         <file>notification.qml</file>
-        <file>resources/close.png</file>
     </qresource>
 </RCC>