Evolve Hack:
Hover States for Image Links

In this article, I’ll describe a particular issue I often needed to solve in Evolve Authoring and provide code that you can copy and paste to solve it too.

To apply the code, you’ll need to refer to my article Applying Your Hacks, and for full context of why hacks are necessary, you can refer to Hacking Evolve Authoring.

Back when I was working in Evolve, I’d sometimes repurpose images as links to other sections. This meant that I could create stylised blocks that would act as links instead of plain old text links or links whose appearance was dictated by Evolve.

One small annoyance with this was that the links wouldn’t have useful hover states. Which meant feedback for the user was limited. I’m not sure if that’s still the case in current version of Evolve, but below is the hack I used to fix it.

Add your Image Links component

The hovers state in the code below is simple, It simply fades out the image when hovered. Though if you know a little CSS you could add to this to create something less generic for your course.

Add this styling code according to my articles Hacking Evolve Authoring and Applying Your Hacks.

/* Basic Hover Animations For Image Links - v1: 02/08/2019 */
@keyframes HoverTopicLink {
    from {
	opacity: 1;
    }
    to {
	opacity: 0.5;
    }
}
@keyframes LeaveTopicLink {
    from {
        opacity: 0.5;
    }
    to {
	opacity: 1;
    }
}
.ev-links-item-container {
	/* transition */
	animation-name: LeaveTopicLink;
	animation-timing-function: ease-in-out;
	animation-duration: 0.2s;
	/* final state */
	opacity: 1;
}
.ev-links-item-container:hover {
	/* transition */
	animation-name: HoverTopicLink;
	animation-timing-function: ease-in-out;
	animation-duration: 0.2s;
	/* final state */
	opacity: 0.5;
}
.ev-links-item-container:active {
	opacity: 1;
}

That’s it!

While that worked for me, that doesn’t mean it will still work for you. Evolve updates often, so always be sure to test the code before you use it and any time you export. Evolve may have even improved this feature such that it’s no longer necessary by the time you read this article.

However, if you’re trying to apply it and it doesn’t work, let me know if you modify the code to work and I’ll update this article.

Thanks…

I also dissect and speculate on design and development.
Digging into subtle details and implications, and exploring broad perspectives and potential paradigm shifts.
Check out my conceptual articles on Substack or find my latest below.

You can also find me on Threads, Bluesky, Mastodon, or X for more diverse posts about ongoing projects.