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

Bernard, on that link, I'm not seeing an effect. The "output" section is blank

@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!

Hmm, that's weird, it's not showing when I view it in Chrome, but it shows in Firefox. Oh well, just replace the image path (i.e the http://..... ) in between the quotes after 'src' in the code with an image path of any colour image you've got on the web.

Try this, it seems to work. I just picked another random image. http://jsbin.com/fejakuluna/1/edit?html,css,js,output

You need to use javascript to change the HTML.

@pareto-design the fade effect worked great! but the image I'm using for the rollover effect is a png (a circle) and yet the fade is acting on a square. Is there a way to make it fade the circle only? Any help would be great!

@pareto-design the fade effect worked great! but the image I'm using for the rollover effect is a png (a circle) and yet the fade is acting on a square. Is there a way to make it fade the circle only? Any help would be great!

Hi Alxfyv im trying to do this same thing but am having problems. I want to make my website so that when I bring my mouse over an image it creates a hover effect. The code youve supplied does not work.

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>

@BernardWest Are you familiar with how to do this? Or point me somewhere that I could read up on it?

I meant to add, you can add transition effects to smooth in and out the inversion of colours.

I think what you want is this. Copy and paste Into custom CSS

a img.thumb-image:hover {  background-color: #ffffff;  opacity: 0.6;} 

This should give you a translucent white background on hover. Adjust opacity (min 0, max 1) up/down for less/more translucency.

If at first it seems not to work, try

background-color: #ffffff !important;opacity: 0.6 !important;

Let me know what happens.

Hello there! I seem to have found the person who can help me. Fingers crossed at least and thank you for all the information above.

I would like to add the darkout/button hover effect on my gallery images in Marta (what I'm using) like the one found on the Wexley template. On hover, the image would also display their title. Please let let me know how I can go about the addition of this visual effect.

My website: www.frenchiessentials.comThank you.

I've been really confused about how to enter in CSS. Does it need a 'style tag' or any other code preceding what you posted? Or can I just paste what you posted into the CSS of that page?

This looks like it just swaps out images, no?

I understand that you want all images site-wide that are links to have a hover effect. If that is correct, then from the main editing menu go to Design > Custom CSS and copy and paste what I gave you into the text area. Do not wrap it in 'style' tags.

If you have or are going to have other images on other pages which also will be links but which you do not want to have a rollover effect, then do the following for only those pages where you do want hover effects.

^ continued:

In page editing mode select a page on which you want hover effects, click on the gear icon on the right, click on Advanced and paste the code into Page Header Code Injection.

In this case you have to wrap the code in 'style' tags. Before the code put an opening 'style' tag:

<style>

After the code put a closing 'style' tag:

</style>

Let me know if my explanation is unclear or you have additional questions.

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.

@brysonprice Sorry for being off topic but could you tell me how you made a full screen navigation menu please?

@Alxfyv, thank you so much for your explanation. This code worked for me:

<style>
a img.thumb-image:hover {
 background-color: #ffffff;
 opacity: 0.6;
}
</style>

The only problem is that the hover image that occurs is a color over the image. Is there a way I can insert a custom image when you hover over the original image?

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

No that's not quite correct. I've confused you it appears.

Use the first code you have above (before "or").

If that doesn't work, then add !important to each of the second and third lines (the lines with 'background-color' and 'opacity' in them) so that they look like the examples in the code after "or".

Be careful to get the semicolon at the end of the line, after !important.

Well there is a cooler effect implemented in squarespace :

Please check this link

These are just amazing guys.

I think I see what you are saying @brysonprice. On the "contact" page, because the images aren't square, the rollover looks bad. You could tackle this a couple of ways, one way would be as you say, change the image. Another common trick is to shift the image a few pixel to the right (say) and up. That makes it obvious when you are hovering over one of the images. That will be easier to do, as it will only involve CSS. Substituting in another image will involve javascript, unless I've forgotten a css trick that can do it.

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