I was wondering if there is some way to create a very simple 'game' where the text is blurred but as you hover over it it appears. An example is here:
The grey table listing the various specs becomes blurry as you hover a mouse over the text. I just want to do the opposite of that.
You can put a text into a <span> to blur it via css and than use a :hover to unblur it.
Amazing, thanks Matthias! That is brilliant and exactly what I need. Where exactly does the CSS need to be placed in Moodle for a 'page' activity?
Sorry, I was rather busy the last few weeks and didn't catch your question.
The best way to do it is to place your CSS formating in "site administration" > "appearance" > "themes" > your theme in the "custom css section".
(Depending on the theme you use, this option might not be available.)
After that you can put the <span class="..."> element in any page you create.
Hi Alex,
Normally, if you try to include CSS code inline, Moodle will filter it out so it won't work.
If your theme supports it, you can include the CSS through that (you'll need administrator privileges). Then you can simply use the class="blur" attribute on any HTML element anywhere in your site.
I hope this helps
Thanks Matt!
I initially thought you had to add CSS through FTP or something, and I don't have much access on this particular Moodle site, but then realised you could add custom CSS via the Moodle theme customisation options!
I've got it all working now and its brilliant - The students love it
Great! Glad to hear it's working for you