-1

I am trying to change an image src on hover.

I would like to ID an image by its URL or alt text because I cannot add a class in this circumstance.

I have tried the instructions from this Stack Overflow link with no luck:

CSS: Change image src on img:hover

WHen hovering over the URL of this image:

https://static1.squarespace.com/static/5463b725e4b06d233c3a876a/t/56a921809cadb641f7ce1a09/1453912583654/Screen+Shot+2016-01-27+at+8.34.20+AM.png?format=750w

I would like it to change to this image:

(I have a link for this image, but I cannot use more than two links in my post)

Here is the URL to my page:

https://toby-thiermann.squarespace.com/new-index/

Thank you.

Community
  • 1
  • 1
junger
  • 65
  • 1
  • 9

1 Answers1

0

Usually the best approach for something like this is to not use an tag and instead use CSS. Using the background-image approach and adding it to your div will then allow you to swap out the image.

Try something like this: 

<div class="your-class-here"></div>

and then css like this:

.your-class-here{
  width: 200px;
  height: 200px;
  background-image: url("your-non-hover-image")
  transition: all ease 250ms
}
.your-class-here:hover{
  background-image: url("your-hover-image")
}

I added a transition, this just makes it a little smoother.

JoethaCoder
  • 494
  • 1
  • 6
  • 17