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.

[Adam7]

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

[Lethality]

@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.

[bobafett · Accepted solution]

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

[Bernadette3]

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

[jonesluke25]

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

[Bernadette3]

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

[KeeLee]

Thanks @bobafett. This is an awesome resource but I can't seem to figure out why it's not working on my site
Any ideas?

[Bernadette3]

Hi @KeeLee Are you using the Embed Element to paste the code into? Can you please post a link to the page you are trying to add it to as well as the code? Thanks!

[KeeLee]

Thanks @Bernadette. I've identified the problem. Working now

[Bernadette3]

Glad to hear it's working for you!

[planespotterhd]

Can someone explain how to do? Just paste the HTML-Code? 

Cheers

[MathD]

Hi,

I tried to paste this exact code (which is the one provided on the linked website) into the html integration and it doesnt seem to work. The titles and and captions are under the images and not when I put my mouse on them. Any idea how to fix it ?

<figure class="snip1456">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample50.jpg" alt="sample50" />
  <div class="title">
    <div>
      <h2>Burgundy</h2>
      <h4>Flemming</h4>
    </div>
  </div>
  <figcaption>
    <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1456 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample31.jpg" alt="sample31" />
  <div class="title">
    <div>
      <h2>Yvonne</h2>
      <h4>Wonderful</h4>
    </div>
  </div>
  <figcaption>
    <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1456"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample68.jpg" alt="sample68" />
  <div class="title">
    <div>
      <h2>Gunther</h2>
      <h4>Beard</h4>
    </div>
  </div>
  <figcaption>
    <p>The only skills I have the patience to learn are those that have no real application in life. </p>
  </figcaption>
  <a href="#"></a>
</figure>

[Adam7]

Was there any other code that was meant to go with that? There should be some CSS, Javascript, or both I would think.

[MathD]

Yes you're right there's both of them.. Any particular place where I must paste those code ?

[MathD]

Nevermind found it !

[adaisa]

Can someone please explain how all three of the codes intermingle and how to paste them into Weebly? 

[Bernadette3]

I believe you can use the Embed Code Element to paste the code found through Bobafett's link. Or you can check out the App Center to see if there's any new photo effect apps. https://www.weebly.com/app-center

[McKael]

Where do I put the CSS and JS code into along with the HTML?

[NatalChoices]

I would also lke a good explanation for this as I can never get it to work. HTML is fine obviously using the embed feature. 

I've tried creating and uploading a new JS file with the theme > CSS/HTML editor and putting CSS into the SEO > Footer and Header (tried both) but it never seems to work.

Could one of you who has done this above, or someone new, please list the steps in simple numbered format as to how to integrate the HTML/JS and CSS on weebly please?!

[suxii]

Also a beginner but how I seemed to have got it to work:

• place html in the embed code where you want on your page
• css goes in the theme html/css under styles > main.less
• js goes in the folder assets > custom.js (which now the naming makes sense)