Jump to content

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

Recommended Posts

  • Replies 55
  • Views 54.8k
  • Created
  • Last Reply

@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

@Alxfyv If the image is coded in HTML, could we use HTML to change the image upon hovering?

I've been meaning to tell you that I really like that "back pulse" transition on the Hover.css page!

Link to comment

Absolutely. But you need to tell me which effect you want to do and create/upload the appropriate images and give links to all the relevant pages/links. Did you see this new example? - http://jsbin.com/fejakuluna/1/edit?html,css,js,output

I'm off to India for a month in a week. So I've only got a couple more days I can help you, then I'll be too busy getting ready. So you need to hurry up if you want my help. ;)

Link to comment

Thanks for your help Bernard! Can we correspond through email? It might be quicker...I can email you or you feel free to email me to keep your address private: BrysonPriceMusic@gmail.com

Link to comment

In amongst all the other tricks and code provided, I worked with Bryson via email to do an "invert" effect on his contact page. Very simple, but I didn't happen to find an IE work around. I have an nearly up to date IE and the effect doesn't work in there. He'll need to google, or better yet, ask at StackOverflow or the like for some code that he can append that will work with IE.

Here's the invert CSS code that needs to be inserted into the header of that page:


<style>
 .thumb-image:hover {
       filter: invert(100%) !important;
       -webkit-filter: invert(100%) !important;
 }
</style>

Link to comment
  • 9 months later...

I am trying all of these and none (with sort of-the exception of final code above.

However, I am trying to start out with my set of images WITH an opacity mask and when rolled over, I want the fully colored image to appear. Anyone know how to do that?

Link to comment

So as not to hijack this thread with another, please post your question as a thread of it's own. Don't forget to give the url to your site and the template name. Leave a comment here giving the url to your question.

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
  • 4 weeks later...
  • 4 weeks later...
  • 2 months later...

Hello Everyone! I put together a comprehensive guide on how add hover effects to your images

We cover

  • fade effect
  • Grow effect
  • invert color effect

Check it out here

Hi, my name is Forrest. I am a founding member of [Pareto Design][1]. Addicted to progress, designing better democracy with tech, & driving youth demand for electric vehicles http://goo.gl/hK1WGZ [1]: http://pareto-design.com

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.