Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Best way to create rollover effect (hover effect) on images?


brysonprice

Question

  • Answers 55
  • Created
  • Last Reply

Recommended Posts

@Alxfyv I tried the code out and see how it looks: BrysonPrice.com/Contact

I like how it looks ok, but I don't like how you can see the image is square. Do you know of a code to replace the current image with another image? Or even just invert the colors of that image (kinda how my 'submit button' is on my contact page. Thanks for your help! I added your effect to the artist pics on my bio page

Link to comment

@brysonprice:

As I understand it, you like the grow effect for the artist pics on your Bio page but would like something else for the social images on your Contact page.

@Bernard West has suggested three possibilities:

1) change the image on hover, as you originally thought;

2) shift the image (e.g. right and up) on hover; and

3) change from the black & white of the image to color on hover.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

^ continued:

Option 1, I believe, requires JavaScript with which I cannot help. Perhaps another user will come along to help with that. You would, of course, have to have the substituted images or URLs to them.

Option 2 is something I have not done before but should be simple enough with CSS and I am happy to figure it out for you. It's a learning experience for me which I welcome.

Option 3 is something I'm not sure can be done with CSS. Changing from color to black & white is easy because you filter out the color leaving the black white underneath, so to speak. But adding

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

^ continued:

color where none exists is a different thing. If you want, I can do some research to see if I can find a way to do it with CSS.

There are other effects that can be done with CSS and we can get the code for them. For examples of what can be done, see Hover.css.

Please let me know what you would like.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

OK. Let me see if I can find a way to do it with CSS. I'll get back to you in awhile. Do you have the image or a URL to the image?

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Well, if you find an image on the web, you copy the link using the right click menu option 'Copy Link.' If you have an image already, then you upload it to SQSP and use the URL SQSP generates.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

I didn't realize you are going to create the rollover image. You will just upload it and use the URL SQSP generates. I won't need it to do the CSS (assuming I can).

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Helllo Everyone,

i was very confused to make gallery and images with the effects then i concern with the very professional web developer that helps me as more as i need. Try to contact with them if you have any issues in your website

Thanks

Link to comment

@brysonprice:

From the research I've done, this is what seems to me to be the case.

CSS can be used to change an image on hover when CSS has been used to set the non-hover image in the first place. This makes sense. What you do with CSS you can change with CSS.

However, in your template the image you want to change on hover is not created by CSS. It's set by the HTML code of the template. It's "hard-coded," so to speak, and, so far as I understand, CSS can't be used to substitute another image in its place.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

^ continued:

The CSS code you found at CSS Hover Effects is an example of using CSS to change what CSS has done in the first place.

If what you're intent upon doing is substituting a different image on hover, JavaScript can probably do it but I don't think I can help because I don't know JavaScript.

If instead you want to apply one of the hover effects found at Hover.css to the image that's already there, I can help.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

^ continued:

If you want to correspond directly, go to my user overview page. There you will find my email address.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

^ continued:

The example @Bernard West coded for you above works because the image called by the HTML code is color to start with. Your social icon images are black and white to start with and I don't know of a way to use CSS to add color where it doesn't exist to begin with.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • Create New...