Scholar

Mouseover/Hover Effects

Another fancy html question from yours truly, so here goes!

 

I would like to know how to properly create mouseover effects with the site editor. Specifically, I'd like to have an element where it appears as text at the bottom of the screen, and when a user hovers the mouse over an image on the page, the text changes to sort of title the image.

 

Secondly, I'd like to know how to change an image's appearance when it is moused over. For example, an image might be static when it is first on the page, but then when it is moused over/hovered over with the mouse it is replaced by a version with an animated border or something of the sort.

 

Any ideas? I have a feeling using the embed code feature is what I want to use, but I'm not sure what the "titles" of the elements would be labeled if they were to interact with each other.

6 REPLIES
Community Manager

Re: Mouseover/Hover Effects

Custom coding it in the Embed Code element is definitely one way to go about it. You might be able to part of what you want with an app from the App Center, too:

 

https://www.weebly.com/app-center/search/hover

- Adam
Senior Community Specialist
Scholar

Re: Mouseover/Hover Effects

@Adam I couldn't seem to find any apps that would give the same kind of effect like what I'm going for... Do you by chance know of any tutorials that would be compatible with the Weebly site editor interface? I've come up dry thus far.
Mayor

Re: Mouseover/Hover Effects

@Lethality:  visit http://littlesnippets.net/category/snippets/ You will have thousands of chocies.

Employee Moderator

Re: Mouseover/Hover Effects

Hey @bobafett I made a slight edit to your reply to fix the link, but this is awesome! Thanks for sharing!! Smiley Very Happy

Explorer

Re: Mouseover/Hover Effects

Hi @Bernadette

 

How did you fix the link.

 

This is exactly what I need, however I am new to using html and am unsure how to adapt it/fix the link. 

 

Thanks

Employee Moderator

Re: Mouseover/Hover Effects

Hi @jonesluke25 the link Boba Fett posted is fine now. I think he just had an extra letter somewhere. Smiley Happy