Special Headline Effect - Animated Circle

[bluetroop2]

Hi X Team,

Can you please view the animated headline effect in the white area on this page… https://dentalofficeacademy.com/ (a green circle appears around “Work Experience”). It was done using a page builder plugin called Elementor, but that’s not an option for me, as I use X.

Is there some JavaScript code or something I could use to get that same effect? Any advice is greatly appreciated.

[albrecht]

Hi @bluetroop2,

Thanks for writing in.

To achieve that you need to have a gif file for the highlight effect, in this example, I am using this circling effect https://media.giphy.com/media/KZvoiewC1f3g74BfhT/giphy.gif.

So in the headline you should wrap the text you want to highlight with a span tag with a class, so you can target it with css afterwards. Put also the gif inside the span. Here’s a sample headline text.

Short and Sweet <span class="highlight-text">Headlines <img src="https://media.giphy.com/media/KZvoiewC1f3g74BfhT/giphy.gif" /></span> are Best!

After that add this css.

.highlight-text {
    position: relative;
}

.highlight-text img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 20px);
    max-width: initial;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    overflow: visible;
}

After saving that, the headline should look something like this.

Hope it helps.