Copy link to clipboard
Copied
Hi guys,
I trying to create a hover effect for web app images on the home page. The clients old site has it, and she likes it, but I can't get it to work on the new site. Be gentle, I'm a designer not a developer.
She wants this... (circle images on home page) http://www.indianhairtx.com/
But it's coming out like this... http://personaltouchhair.businesscatalyst.com/
I tried searching the web and forums, but no solution. I know it can be done, as I have seen it in templates and other sites.
Thanks!
Derek
Hi,
This is a pretty simple CSS trick.
using :hover after a CSS class will allow you to apply different effects depending on where the cursor is on screen, and what item it's 'hovering' over.
If you update your CSS to the following it'll work.
.circle { width: 250px; height: 250px; border-radius: 50%; margin: 0 auto; background-color:#3c2415;}
.circle img { border-radius: 50%; opacity: 0.2; }
.circle img:hover { border-radius: 50%; background-color:#3c2415; opacity: 1;}
.circle-over { width:
...Copy link to clipboard
Copied
Perhaps this example will provide some insight: codepen.io/r-k-b/pen/XKxyaZ
Copy link to clipboard
Copied
Hi,
This is a pretty simple CSS trick.
using :hover after a CSS class will allow you to apply different effects depending on where the cursor is on screen, and what item it's 'hovering' over.
If you update your CSS to the following it'll work.
.circle { width: 250px; height: 250px; border-radius: 50%; margin: 0 auto; background-color:#3c2415;}
.circle img { border-radius: 50%; opacity: 0.2; }
.circle img:hover { border-radius: 50%; background-color:#3c2415; opacity: 1;}
.circle-over { width: 250px; height: 250px; border-radius: 50%; margin: -250px auto 0 auto;}
I suggest checking out CSS :hover Selector for more info on the topic.
If you need any more help, feel free to let me know.
Kind regards,
Nate C.
Copy link to clipboard
Copied
Thanks guys! Worked great!
Copy link to clipboard
Copied
As a note, if you are doing hover, always go for the parent rather then child. It allows you to then manipulate all the child elements more easily.
Copy link to clipboard
Copied
Did you notice the unpleasant flicker effect when hovering over the lettering?
Copy link to clipboard
Copied
Because the hover is on the image not the parent
Copy link to clipboard
Copied
Yes I did notice that, but I can't seem to fix it.
Copy link to clipboard
Copied
Perhaps try again, using this example? (demo video)