Jump to content

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

Recommended Posts

  • Replies 55
  • Created
  • Last Reply

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

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

@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

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

One solution could be to make the image "grow" a bit on hover. If you would like to try this, cut all the code I gave you from Page Header Code Injection and copy and past the following:`


<style>
a img.thumb-image {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateZ(0);
         transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
 -webkit-transition-duration: 0.3s;
         transition-duration: 0.3s;
 -webkit-transition-property: transform;
         transition-property: transform;
}

a img.thumb-image:hover,
a img.thumb-image:active {
 -webkit-transform: scale(1.1);
         transform: scale(1.1);
}
</style>

I've tried this code with a button on my site and it works. I don't know what it will look like with your photo images but for the social images it should work.

If you decide to try this, let me know what happens and whether you like it.

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

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.