How to Change image with :hover


#1

I know how to use :hover with text, but I've tried changing an image's source with it, to no avail. Would you change it with HTML or CSS, and how would you do it?

Thanks for your help. :slight_smile:


#2

changing the value of src? this is not possible with html and css so far i know, use js or jquery


#3

I haven't studied those languages too much yet, but I guess I will now... (they are important).

Is there any image manipulation possible with css?


#4

well, js is a language, jquery is js library.

absolutely, you could always increase the width or height of an image by creating a hover property and define a new width:

img:hover {
  width: 200px;
}

or with transition, transform and more are some cool possibility's.

what you can't do with css: manipulate html (like image source). for this, we have js


#5

I knew about height and width, but not those other ones. They look pretty neat, but not exactly what I was looking for... but thanks for your help. I will keep these in mind. :slight_smile:


#6

transform and transition where introduced with css3, there are some cool things.

yea, like i said:

what you are looking for can't be done with css, you need JS (or jquery, which makes things like src attribute manipulation easier)


#7

i made a bin for you, something like this you are trying to achieve? If you want the image to change permanent, use .hover()


#8

I guess i'm kinda new to the coding community... so I have to ask, what's a bin again? It looks like on the link that it's an online (aka cloud) storage file.

I've been tinkering with some code on codecademy and left some code in one of it's lessons for now. I know that it's better to leave on something like github, but I like how you can immediately see the results.


#9

in this case bin refers to a cloud storage, jsbin allows me to quickly share code. jsbin calls this bins, guess that is where i got the name. There are many of these services (codepen, jsfiddle, jsbin and more)

you can create html and css files on your computer, all you need is a text-editor (notepad would do), although i would install something a bit more sufficient (like atom)


#10

Actually I've already downloaded atom.

It looks like a great editor, but I don't see where you run the code.

I guess since I'm trying new things I like how in codecademy you can see immediate results.
I've used notepad and have my files there too, but it doesn't organize the code as well.


#11

after saving the files with atom, you can simply open the html files with your browser (simply navigate to the file with the file manager, and select open with browser), if you make changes in the html file with atom, simply refresh the page to apply the changes (this load is quick, given it is a static page on the computer)

maybe you can tweak it, something like this, an extension to live preview html code.


#12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.