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

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

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.

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

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.

Link to comment

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.

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:

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.

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

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

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

Link to comment

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

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.

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

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

Archived

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

Guest
This topic is now closed to further replies.

×
×
  • Create New...