1: Create the Module
The first step is to create the module you want to add the hover effect to. After yo have the module created, open the module settings and navigate to the Advanced tab. In the CSS ID & Class dropdown menu, add an arbitrary name to the CSS ID. This can be anything, just keep in mind we will be using this later so dont make it too complicated. For this tutorial example I will be manipulating an Image, so my ID will be “Image”
2: Create a Code Module
Because your will be editting the style of the site, you will need to add <style> to the beginning of the module, and </style> to the end of the module. After you have done this you can implement the following code into the module. Keep in mind that the code between the curly braces can be what ever you would like and the chages will only happen when you hover over the module.
3: Decide what you want to happen when you hover over it
In the example below I wanted the picture to move from the left to right. To do this I needed to do some CSS Animation, but I’ll include some other examples along with the one I have for this post. If you want to know about CSS Animation, check out this blog post
If youve done everything correctly, you should have a module that does something like this when you hover the mouse over it. Below are some examples of different things you can do with this effect. Feel free to copy any and all of the examples.
This is just some Sample Text, but hover over me and will have an underline.
