I have a div containing an image that should only appear when an element is hovered over. I would like to add a side arrow pointing towards the direction of the hovered element.
Below is the code for generating the square div:
<div id="image-thumbnail-container">
<img id="image-thumbnail" class="arrow-right">
<div class="triangle"></div>
</div>
CSS styling:
#image-thumbnail-container {
display: block,
position: fixed,
padding: 4px,
border-radius: 5px,
}
#image-thumbnail {
display: block,
position: fixed,
border: 1px solid #000,
padding: 4px,
border-radius: 5px,
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #ff0055;
}
Here is an example (not exact representation of the generated code):
https://i.sstatic.net/MlAGH.png
I know how to create the arrow and the background div separately, but I am looking for a way to seamlessly connect them with smooth borders as shown in this sample:
https://i.sstatic.net/uOXqh.png
If achieving this seems complex, any suggestions on creating an arrow with a background suitable for transparent images are appreciated!
Thank you!