brysonprice 31 Share Posted February 17, 2015 (edited) 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! Edited February 17, 2015 by brysonprice Tidy pilotdesignco, jenniferboddam, Adaniels and 2 others 5 Link to post
0 Bernard West 1,078 Share Posted February 18, 2015 (edited) @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. Edited February 18, 2015 by Bernard West Link to post
0 brysonprice 31 Author Share Posted February 18, 2015 @BernardWest Thanks man:) Where do I paste the code from the jsbin website? Link to post
0 alxfyv 6,580 Share Posted February 19, 2015 @brysonprice: From the research I've done, this is what seems to me to be the case. CSS can be used to change an image on hover when CSS has been used to set the non-hover image in the first place. This makes sense. What you do with CSS you can change with CSS. However, in your template the image you want to change on hover is not created by CSS. It's set by the HTML code of the template. It's "hard-coded," so to speak, and, so far as I understand, CSS can't be used to substitute another image in its place. 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 post
0 alxfyv 6,580 Share Posted February 19, 2015 (edited) ^ continued: The CSS code you found at CSS Hover Effects is an example of using CSS to change what CSS has done in the first place. If what you're intent upon doing is substituting a different image on hover, JavaScript can probably do it but I don't think I can help because I don't know JavaScript. If instead you want to apply one of the hover effects found at Hover.css to the image that's already there, I can help. Edited February 19, 2015 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. Link to post
0 alxfyv 6,580 Share Posted February 19, 2015 ^ continued: If you want to correspond directly, go to my user overview page. There you will find my email address. 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 post
0 alxfyv 6,580 Share Posted February 19, 2015 ^ continued: The example @Bernard West coded for you above works because the image called by the HTML code is color to start with. Your social icon images are black and white to start with and I don't know of a way to use CSS to add color where it doesn't exist to begin with. 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 post
0 Bernard West 1,078 Share Posted February 19, 2015 (edited) Well, we'd have to customise it for your particular page. If you want to use that effect, let us know which page(s), and I'll write some code for you. But you'll need to provide coloured images as the base images. Your social icons are currently black and white. Edited February 19, 2015 by Bernard West Link to post
0 brysonprice 31 Author Share Posted February 19, 2015 Bernard, on that link, I'm not seeing an effect. The "output" section is blank Link to post
0 brysonprice 31 Author Share Posted February 19, 2015 @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! Link to post
0 Bernard West 1,078 Share Posted February 19, 2015 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. Link to post
0 Bernard West 1,078 Share Posted February 19, 2015 Try this, it seems to work. I just picked another random image. http://jsbin.com/fejakuluna/1/edit?html,css,js,output Link to post
0 Bernard West 1,078 Share Posted February 19, 2015 You need to use javascript to change the HTML. Link to post
0 brysonprice 31 Author Share Posted February 19, 2015 @BernardWest Are you familiar with how to do this? Or point me somewhere that I could read up on it? Link to post
0 Bernard West 1,078 Share Posted February 19, 2015 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 post
0 Bernard West 1,078 Share Posted February 19, 2015 (edited) I should add, the CSS only effects will be much easier to do than javascript code. The colour/black and white example I gave should be very easy to do once you create colour images. Edited February 19, 2015 by Bernard West Link to post
0 brysonprice 31 Author Share Posted February 19, 2015 Thanks for your help Bernard! Can we correspond through email? It might be quicker...I can email you or you feel free to email me to keep your address private: BrysonPriceMusic@gmail.com Link to post
0 Bernard West 1,078 Share Posted February 21, 2015 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 post
0 Bernard West 1,078 Share Posted February 21, 2015 I meant to add, you can add transition effects to smooth in and out the inversion of colours. Link to post
0 DNelson 0 Share Posted February 24, 2015 @brysonprice Sorry for being off topic but could you tell me how you made a full screen navigation menu please? Link to post
0 AHD 0 Share Posted December 12, 2015 I am trying all of these and none (with sort of-the exception of final code above. However, I am trying to start out with my set of images WITH an opacity mask and when rolled over, I want the fully colored image to appear. Anyone know how to do that? Link to post
0 Guest Share Posted January 7, 2016 Also note, declaring the type of style: <style type="text/css"> CSS Here </style> seems important Link to post
0 mmnauman 0 Share Posted February 2, 2016 You will get all your answers and the ways to create rollover effect.http://www.trendingwidgets.com/2016/02/add-rollover-image-effects-image.html Link to post
0 Adaniels 5 Share Posted April 23, 2016 @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! Link to post
0 Adaniels 5 Share Posted April 23, 2016 @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! Link to post
0 RobertFlom 0 Share Posted July 2, 2016 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 post
Question
brysonprice 31
The pages I would like rollover effects on are:
BrysonPrice.com/music – rollover effect on album art
BrysonPrice.com/contact – rollover effect under “Connect” images
Thanks for your help!
Edited by brysonpriceTidy
Link to post
Top Posters For This Question
16
14
13
Popular Days
Feb 18
17
Feb 19
14
Feb 17
9
Jul 2
3
Top Posters For This Question
alxfyv 16 posts
Bernard West 14 posts
brysonprice 13 posts
Popular Days
Feb 18 2015
17 posts
Feb 19 2015
14 posts
Feb 17 2015
9 posts
Jul 2 2016
3 posts
Popular Posts
alxfyv
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. Adjus
Posted Images
55 answers to this question
Recommended Posts