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

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

Question

Recommended Posts

  • 2

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. Edited by alxfyv
grammer

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.

Share this post


Link to post
  • 2

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.

Edited by alxfyv

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.

Share this post


Link to post
  • 1

@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

Edited by brysonprice

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Edited by CRM114

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.

Share this post


Link to post
  • 0

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

Edited by brysonprice

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Edited by alxfyv

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@alxfyv I found this link, but I'm not really sure how to apply it to my website due to my lack of website skills.

CSS hover effect

I thought some of the items on the Hover.css link were great, but I really need the image swap for this one due to the shape of the icon.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@Alxfyv I haven't created the replacement rollover image yet. But the original image URLs on my contact page are named 'twitter' 'instagram' 'facebook' 'youtube' (found in page settings under 'edit content' URL). Is that what you mean?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

You just reverse the process. Start with a coloured image and on load you have it changed to black and white with CSS. On hover, you change the css to remove the black and white effect. Therefore you get a black and white image changing to colour on hover. It reverts back to the original css when you "un"-hover.

Edited by Bernard West

Share this post


Link to post
  • 0

@brysoneprice... I've changed a number of your responses from "answers" to "comments". Please try and use the comment feature when you are responding to other comments. The answer feature should be only used when you are providing an actual answer to the OP question or a related major question.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...