Web Apps Hover Effects

[Envision Marketing]

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

[Robert_K__Bell]

Perhaps this example will provide some insight: codepen.io/r-k-b/pen/XKxyaZ

[TheColourfulOwl · Accepted solution]

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.

Making Creativity Smart | Colourful Owl

[Envision Marketing]

Thanks guys!  Worked great!

[Liam Dilley]

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.

[Robert_K__Bell]

Did you notice the unpleasant flicker effect when hovering over the lettering?

[Liam Dilley]

Because the hover is on the image not the parent

[Envision Marketing]

Yes I did notice that, but I can't seem to fix it.

[Robert_K__Bell]

Perhaps try again, using this example? (demo video)