How do I create mouseover / hover effects with images?

[Lethality]

[Note: The title of this post has been edited by a moderator.]

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.

[MTpockets2]

Hi Lethality and Suxii,

yes as suxii has mentioned that's the proper way to do it.  

[Brandy_Brenner]

I bought the littlesnippet hover library. I downloaded the css code, but can't find the HTML or Java Script to go with it. Is this something I should be writing myself(in that case I have a lot to learn...)? Or is it provided somewhere? 

[Adam7]

Which library did you buy, @Brandy_Brenner? It looks like there's more than one hover library they offer.

[Louis9]

Hi,
I was trying to everything that you guys are saying, but is not working.
I don't know if there is a video to show hoe to do it, that will helps a lot.

[Bernadette3]

Hi @Louis9 What are you trying to do with your images? There might be some alternatives.  

[Louis9]

Hi,

This is for National History Day, I will tray to do some animation on the website: when I pass the mouse on top on any picture I would like to show a text on top of the picture saying where I found the picture.

[Louis9]

Hi Bernadette

I was watching many videos in YouTube and nobody shows us clear how to do it.

[Bernadette3]

Oh, okay you don't have access to the app center then. Also, I am not 100% certain on the NHD rules so just make sure you double check with your teacher to make sure you are able to make these types of customizations.

Did you check out the link Bobafett suggested? http://littlesnippets.net/category/snippets/ 

When you find a style you like there should be three pieces of code. As Suxil pointed out, the html code will go in an Embed Element. Don't forget to edit the image urls and the text to your own content. The css code will go into Themes>Edit HTML/CSS>Styles>main.less folder. Follow this click path, then scroll to the bottom of the code section and paste at the end. 

 . 

As you can see, I pasted mine at line 1559. Then you will follow the same steps for the JS code and paste it under Assets>Custom JS. Make sure to save and publish. 

IMPORTANT!! Editing the html/css area of your website will make your site a custom theme. Once you are on a custom theme you are responsible for troubleshooting your website on your own. If you contact the support center your site will show as a custom theme and the reps will not be able to assist you with your code or any issues possibly related to the code. 

I just want you to make sure to edit the area carefully and do not delete any files on accident. Best wishes to you! Let us know if you get stuck. 

[Louis9]

I'm sorry Bernadette, I just saw your message. I just finished to fix some texts and tomorrow i will follow your message steps.

Thank you very much and i will let you know.

[CarlyHanvey]

eff yeah! Thank you @Bernadette !! I am excited to try this WOOT WOOT!!

[Bernadette3]

No problem, @CarlyHanvey Just make sure you use caution when editing this section as Weebly support will not be able to assist you once your theme is a "custom theme". You can easily create a copy of your site to practice on by clicking on the three dots next to Edit Site from your dashboard. 

[CBFSWeebly]

Where do I place the Embed Element on my page? Above the picture I am wanting to have the hover effect on? If I add the css and js code will it then make the hover effect take place for every picture on the site?

I am very new to website design and the code portion is a foreign language still

[Bernadette3]

Hi there. It depends on the instructions from the third party you are using, but you should see the Embed Element option on the left hand side (after clicking"build"). If you are not super familiar with code, I wouldn't recommend editing the html/css section of the theme. 

[Aarriann]

You've made it very clear on where the code goes. My issue is how to embed code on a photo (single, non-gallery image) I've uploaded from my hard drive. When I drag the embed code widget, it goes above or next to the photo, not on it. The examples I've seen in this tread show the image coming from amazon cloud or another page. Thoughts?

[Adam7]

You won't be able to somehow add the Embed Code element to an Image element, though you can make the code you have in your embed code element influence the image. I would paste in the code you are using as well as a link to the page you added it to; I'm sure another member of the Community might have some advice.

[redwoman90]

Ho do you know where to past the CSS code and how do you know what to rename the pics?

[hitchcackle]

I inspected the image from my browser (had to just randomly place on the page and publish). But I was able to copy the file name/location to put into the custom html.

[hitchcackle]

@Bernadette would you know if I have to paste a new instance of the css for each image I use the hover effect on? Or can I have many instances of the same effect reference one set of css code? 

I'm having an issue where images that have the effect are appearing broken. I've replaced them by re-embeding the code but they have appeared broken again.

Appreciate any help,

Adam

[Bernadette3]

I'm not sure about that.. this really isn't my area of expertise, but there's a lot of users on here that may be able to help you out or give you some guidance. It's helpful if you post a link to your live site.