How to add JS to code widget or something, thanks! (image hover)

Hi guys! I want to add an image hover effect to my page. I used to code widget and added the html code, the css additional code but…i cannot see any js option to add the js, may i know from any of you how can i add it? I am not a programmer/coder, just a regular designer so this is really new for me. 0 code experience.

This is the html code:

<figure class="snip1104 red">
  <img src="upload://L7lmI0JHX0kCuPUGqnIwApwvAt.jpeg" alt="sample33">
  <figcaption>
    <h2>Jean  <span> Myers</span></h2>
  </figcaption>
  <a href="#"></a>
</figure>

This is the CSS code:

/* Included color classes.. 
	.red 
	.blue 
	.yellow 
*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1104 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

and this is the JS code;

  $("figure").mouseleave(
    function() {
      $(this).removeClass("hover");
    }
  );

APPRECIATE your HELP

Thanks a lot!

Most of the time your JS goes into the project/page footer.

I’m not sure what you’re trying to achieve with the above code snippets. In Dutch, we would say “I can’t make any chocolate out of it” Which probably wouldn’t make sense in English as well. :joy:

Where is the html code?

They haven’t used the tags in the forum to display the markup. It’s there though, I edited the post to fix it.

It seems to me you’re missing most of the css, half the JavaScript and html.

It looks like you’re changing a colour on hover maybe?

Maybe describe the outcome. It’s more than likely you can just build this in blocs directly anyway.

1 Like

Hi @PeteSharp and all. This is the link to the website that provides the codes:

https://codepen.io/littlesnippets/pen/NGdoKP

below to @PeteSharp

I did a quick try and it works well. I will probably share it here over the weekend as an easy-to-understand bite-size Bric.

Small Potato Ltd 18-05-2023 at 06.09

1 Like

This was an interesting find, thanks to your post

wow! you are the man! thanks a lot! since I really don’t know code, I mean 0.0 % a step by step guide of how to implement this on Blocsapp could be great! Once again, thanks so much!

1 Like

Hi @Jerry any news from that share? it could be great to know how you explain it in a “easy” way, thanks so much!!! :grinning:

First, it was my humble offer to craft a solution for you over the weekend, but afterwards, you’re rolling out the red carpet for a full-blown, step-by-step guide.
Unfortunately, you’ll have to be patient and wait for that magic moment when I can squeeze it into my schedule. Once done will post it here. In the meanwhile, and this might sound radical, but you could perhaps engage in a bit of self-study. Maybe give Bootstrap, CSS, and if you’re feeling particularly daring, a bit of JavaScript a whirl. That way, you won’t always need someone else to come to your rescue. Alternatively, there are some freelance developers on this forum who will be able to sort you out within hours for a small fee.

1 Like