How can I add another image, when hovering this image?

Hello,

Look at this code:

Code:

<a target="_blank" href="My URL . com"><img style="width: 250px; height: 100px;" alt="" border="0" src="My IMG URL . png" /></a>

(I have not decided what links to use yet. But first one is the page visited when clicking, and second one is the image displayed that you click on.)

How can I make it so that when you hover the image, it turns into another image? It needs to light up, in the same way a regular link would.

Edit: The second image should be the same size as the first one, 250×100.

Thanks.

Good afternoon!

A clarifying question - should the image completely change to another when hovering or to the image just added effects?

If just adding an effect - use the hover pseudo-class and add the effects you need

For example (I used the forum widget to demonstrate):

Code:

<style>
.img_exp {
width: 190px;
height: 260px;
margin: 20px;
}

.img_exp:hover{
opacity: 0.6;
border: 2px solid red;
}

</style> <img src="https://starwars-visualguide.com/assets/img/characters/1.jpg" class="img_exp" />

Result (before and after hover):





You can also use the mix-blend-mode property only when hovering - https://codepen.io/Ilya-Babelnik/pen/poLGbXG
Or use filter - https://codepen.io/Ilya-Babelnik/pen/MWVZjJa

If you need something else, describe it in more detail. Maybe you have examples.

[delete]

hello

you can add something like this code https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_zoom

Hey,

Razor12345 wrote:A clarifying question - should the image completely change to another when hovering or to the image just added effects?

Completely to another.

I want to use this code:

Code:

<a target="_blank" href="https://help.forumotion.com/"><img style="width: 33px; height: 31px;" alt="" border="0" src="https://i.servimg.com/u/f21/16/89/96/68/faq11.png" /></a>

(I will change the URL:s later.)

I will put this code in a forum category description.

Right now, if you hover this image, it does nothing. What I want is for the image to turn into another custom image (the same size) when hovering, let's say this one:

https://i.servimg.com/u/f21/16/89/96/68/tipsnt12.png

I also re-size the image through this code by half, to give it a sharper look. The new "hover image" would also need to be re-sized to 33×31.

If someone could rewrite the code for me, that would be cool.



Thanks.

If each category has different pictures, then:

Insert the code in the forum description:

Code:

<a target="_blank" href="https://help.forumotion.com/"><img style="width: 33px; height: 31px;" alt="" border="0" src="https://i.servimg.com/u/f21/16/89/96/68/faq11.png" /></a>   

<script>
let imgForum = $('img[src="https://i.servimg.com/u/f21/16/89/96/68/faq11.png"]');
imgForum.hover(handlerIn, handlerOut);

function handlerIn () {
imgForum.attr('src', 'https://i.servimg.com/u/f37/11/71/42/99/raznoe10.png');
}

function handlerOut () {
imgForum.attr('src', 'https://i.servimg.com/u/f21/16/89/96/68/faq11.png');
}

</script>

This uses a link to the default image

Code:

let imgForum = $('img[src="https://i.servimg.com/u/f21/16/89/96/68/faq11.png"]');

This function is triggered when the user points at the image. Accordingly, a link to another image

Code:

function handlerIn () {
imgForum.attr('src', 'https://i.servimg.com/u/f37/11/71/42/99/raznoe10.png');
}

This function is triggered when the user removes the mouse from the image - the default image link.

Code:

function handlerOut () {
imgForum.attr('src', 'https://i.servimg.com/u/f21/16/89/96/68/faq11.png');
}

You can see the result on my test forum: https://testtesttest.forumotion.me/ (section Forum1)

If you will use the same images for categories, you have to assign different classes for the same images:

img class="first_forum"

Code:

<a target="_blank" href="https://help.forumotion.com/"><img class="first_forum" style="width: 33px; height: 31px;" alt="" border="0" src="https://i.servimg.com/u/f21/16/89/96/68/faq11.png" /></a>   

<script>
let imgForum = $('img.first_forum]');
imgForum.hover(handlerIn, handlerOut);

function handlerIn () {
imgForum.attr('src', 'https://i.servimg.com/u/f37/11/71/42/99/raznoe10.png');
}

function handlerOut () {
imgForum.attr('src', 'https://i.servimg.com/u/f21/16/89/96/68/faq11.png');
}

</script>

It works perfectly, thank you very much!

Topic marked as "solved".