brysonprice Posted February 17, 2015 Share Posted February 17, 2015 The pages I would like rollover effects on are: BrysonPrice.com/music – rollover effect on album artBrysonPrice.com/contact – rollover effect under “Connect” images Thanks for your help! Link to comment
alxfyv Posted February 17, 2015 Share Posted February 17, 2015 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
brysonprice Posted February 17, 2015 Author Share Posted February 17, 2015 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? Link to comment
alxfyv Posted February 17, 2015 Share Posted February 17, 2015 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
alxfyv Posted February 17, 2015 Share Posted February 17, 2015 ^ 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
brysonprice Posted February 17, 2015 Author Share Posted February 17, 2015 @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
alxfyv Posted February 17, 2015 Share Posted February 17, 2015 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
Bernard West Posted February 17, 2015 Share Posted February 17, 2015 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
Bernard West Posted February 17, 2015 Share Posted February 17, 2015 This is another idea as well - http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS You can use css to change the image from black and white to color when you roll over. That's a nice effect if you can get it to work. Link to comment
alxfyv Posted February 18, 2015 Share Posted February 18, 2015 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
brysonprice Posted February 18, 2015 Author Share Posted February 18, 2015 @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
Bernard West Posted February 18, 2015 Share Posted February 18, 2015 See my reply to alxfyv's other answer. It should be pretty simple to go from a black and white image to a colour image. Link to comment
brysonprice Posted February 18, 2015 Author Share Posted February 18, 2015 @bernardWest thanks for your reply! I must have missed it. So does that mean that because it is JavaScript, it can't be recreated with CSS? I will check that link u posted as well Link to comment
alxfyv Posted February 18, 2015 Share Posted February 18, 2015 @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
alxfyv Posted February 18, 2015 Share Posted February 18, 2015 ^ 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
alxfyv Posted February 18, 2015 Share Posted February 18, 2015 ^ 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
brysonprice Posted February 18, 2015 Author Share Posted February 18, 2015 @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. Link to comment
alxfyv Posted February 18, 2015 Share Posted February 18, 2015 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
brysonprice Posted February 18, 2015 Author Share Posted February 18, 2015 @Alxfyv Where do I find the URL to the image? Link to comment
alxfyv Posted February 18, 2015 Share Posted February 18, 2015 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
brysonprice Posted February 18, 2015 Author Share Posted February 18, 2015 @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? Link to comment
alxfyv Posted February 18, 2015 Share Posted February 18, 2015 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
Bernard West Posted February 18, 2015 Share Posted February 18, 2015 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. Link to comment
Bernard West Posted February 18, 2015 Share Posted February 18, 2015 @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. Link to comment
Bernard West Posted February 18, 2015 Share Posted February 18, 2015 @brysonprice... check this code out. I just did a simple example in a code bin to show you how it would look. http://jsbin.com/sagepegila/1/edit?html,css,js,output And you can add ease-in/out effects to smooth the colour change transition, if you want. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.