I'm facing a bit of a challenge here. I need to figure out how to overlay an image onto another image using just a single image tag. Specifically, I want to add a resize icon to the bottom right corner of an image to let users know they can resize it by clicking and dragging at that spot.
Currently, I am utilizing inline CKEditor along with Interact.js to enable inline image resizing. Everything is functioning correctly, but the lack of this image marker makes it unclear to users that they can resize the image.
The problem is that :before and :after on img tags do not work for me. Wrapping the image in a container is also not feasible as it disrupts features like dragging and dropping the image into different positions. The entire solution needs to be contained within the img tag itself.
My current approach involves adding a CSS border image of the resize icon while collapsing the left and top borders. This method does provide the desired functionality, but I would prefer the marker to be on the image rather than positioned outside of it as displayed in my preview. Additionally, since it's a border image, I can't set a custom cursor to indicate to users that they can click there.
Do you have any suggestions? I might have to settle for this workaround and move forward, but ideally, I'd like a pure CSS solution. However, I am open to incorporating JavaScript or jQuery if necessary. I attempted an approach where hovering over the image would trigger a wrapper with a positioned image, but it didn't function as expected.
#foo{ padding:0 16px 16px 0}
#foo:hover{
border: 10px solid transparent;
padding: 0;
-webkit-border-image: url(/templates/client/js/ckeditor/plugins/compuimage/images/resize.png) 50 round; /* Safari 3.1-5 */
-o-border-image: url(/templates/client/js/ckeditor/plugins/compuimage/images/resize.png) 50 round; /* Opera 11-12.1 */
border-image: url(/templates/client/js/ckeditor/plugins/compuimage/images/resize.png) 50 round;
border-width:0 16px 16px 0;
padding:0;
}
Thank you