Placing a colored circle over html link

Question

Is there a simple (using css/js/jquery) way to place a transparent colored circle centered on top of a link, as shown in the example below? The text in the gray box would also be nice.

I tried by starting with the answer to this question: Put background image over text? . But when I shortened the colored overlay to less than 100%, I couldn't get it to center over the text (let alone appear as a circle).

Sorry but this isn't my strongest area and I don't know if what I'm trying to do is stupid simple or way too hard. Thanks for any help.

UPDATE: Reading some proposed solutions I realize I should have been much clearer in my original question.

The first important point I left out is that I'm not looking for a hover effect; when the user calls up the page, I would like all the circles (and text, if possible) to be showing.

The second important point is that my goal is to add the styling dynamically, so I won't know in advance where the links will be or how big they will be. The information I'll know will be the link itself (the URL and ID) and the color of the circle needed for that link. (What I'm trying to do is create a heat map indicating which links on a page got the most clicks.)

Which brings me to the third point I left out: not all the circles will be the same color. I'm looking for 4 color options; a page might have three green circles and two purple circles, for example.

I'm sorry my incomplete question sent folks down the wrong path trying to help me.

Answer 1

There are multiple ways to do this, I used margin: auto with top: 0; left: 0; bottom: 0; right:0; top: 0; left: 0; bottom: 0; right:0; for the first and translate for the second.

 .container { position: relative; width: fit-content; width: -moz-fit-content; } .circle { background: #909; width: 4em; height: 4em; border-radius: 2em; opacity: 0.4; } #circle-1 { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } #circle-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .grey-box { background: #999; font-size: 0.8em; border: 1px solid #222; padding: 0.2em; position: absolute; top: -70%; left: 50%; } 

 <div class="container"> <h2>Getting a head start in the health sector</h2> <div id="circle-1" class="circle"></div> <div class="grey-box">Total: 47(0.1%) Unique: 28(0.1%)</div> </div> Established health sector companies can meet patient needs and cut their own costs by collaborating with startups, research shows. <div class="container"> <h3>Judge Business School</h3> <div id="circle-2" class="circle"></div> </div> 

Answer 2

You can achieve the circle without modifying the HTML at all, using a CSS-only solution:

 a { position: relative; } a::after { content: ""; display: block; position: absolute; pointer-events: none; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 2em; width: 2em; background-color: blue; opacity: 0; transition: opacity 0.2s; border-radius: 50%; } a:hover::after { opacity: .5; } 

 <a href>Getting a head start in the health sector</a> 

It only requires that the <a> tags be position: relative , which usually doesn't cause any visible differences in existing styling, since links by default are display: inline .

In order to get the tooltip working, you can by utilizing both ::before and ::after , and dynamically populating the tooltip's text by employing the use of data- attributes, again to avoid as many changes to the existing HTML as possible:

 document.querySelectorAll('a').forEach(a => { a.setAttribute('data-tooltip', 'Total: 47 (0.1%) Unique: 28 (0.1%)'); }); 

 body { padding: 3em; } a { position: relative; } a::before { content: ""; display: block; position: absolute; pointer-events: none; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 2em; width: 2em; background-color: blue; opacity: 0; transition: opacity 0.2s; border-radius: 50%; } a::after { content: attr(data-tooltip); display: inline-block; position: absolute; pointer-events: none; bottom: 100%; left: 50%; white-space: nowrap; padding: 0.25em; font-size: 0.6em; color: black; background-color: lightgrey; border: 1px solid black; opacity: 0; transition: opacity 0.2s; } a:hover::before { opacity: .5; } a:hover::after { opacity: 1; } 

 <a href>Getting a head start in the health sector</a> 

Answer 3

Maybe can try to convert tag to an inline-block, and with ::after pseudo-element draw the circle using :hover pseudo-class.

Example:

 .circle-link { display: flex; justify-content: center; position: relative; } .circle-link span { display: block; height: 20px; width: 20px; position: absolute; visibility: hidden; background-color: blue; opacity: .5; border-radius: 50%; } .circle-link:hover span { visibility: visible; } 

 <div class="circle-link"> <a href="my_link.com" >Here is the text of my link</a> <span></span> </div> 

Answer 4

You should'nt need to use Javascript or Jquery for this unless your using an event listener function ie. for mouse over, click or hover effect, but even these can be achieved using pure Css, use the following attributes/pseudo-classes in your CSS:

    ::before & ::after
    & or, :hover & :target   

,that one of the other posters has mentioned to "capture" events.
To get a circle, just give a div the CSS attribute of;

     border-radius:50%;
     bakground-color:You Choose purple, blue or hex value;

& the width:; You choose, will determine the size of the circle. & set them with;

      position:absolute;
      top:?;   right:?;   bottom:?;  left:?;  /*To move them 
                                                   around

If I remember correctly, left:Moves it right, right:moves it left.
If you use the z-index property on both the links, and the circle divs you would not have to have the circles transparent, but it is totally dependant on how you wish to style it. Currently in the example above the circles are overlaping the text, & distorting the color of the link text which may not be desirable & can detract from the overall look. Not only this but it takes away the contrast of the text element. You want the text to be bold, or brighter than elements behind it.

with the tool tips, I would give them a border radius of anywhere from 2/5px and maybe animate a glow beneath them.. Goodluck, Some of the other answers above are good aswell..

The Greyish tool tips you have mentioned can be made by creating two divs, around 18px height, 128px width. Space them out using position element then make two smaller divs, (maybe 9px to 14px)both with the same background color as the initial two you made above, position them using position absolute. So you have large grouped with a small in two pairs. use Transform:Rotate(45degs) on the two smaller ones. & possibly Transform:Skew(?) to achieve desired angle. Then set their Zindex to be behind the larger ones.

Might be fiddley, getting the position right & theres probably a much easier method. But i'm still learning as I go...

Goodluck.

Answer 5

Just create and div with border-radius 50% with some background and size, create and div width tooltip text. Set position of elements to absolute. Add an event listener to mouse move, and move your elements to cursor position when it over some link. It will look very nice, especialy if you add some animation to moving.