0

I am struggling with this for a few days now and yet to resolve it. I've read a lot of documentation and googled in the darkest corners. There are a few stackoverflow links discussions that actually discuss this problem e.g.: Greyscale Background Css Images

In short: I am trying to have a coloured version and grey version of the sidebars, the feathers, text and Eagle in the middle. When you mouseenter on any of the sidebars there needs to be a coloured version of these things. When you mouseleave everything turns grey. Now after some days of struggling with this, I managed to get two different results.

Version 1. I used two <div>'s for every image. E.g. http://fiddle.jshell.net/zPGwY/

Version 2. I used one <div> for every image. But can not get the same fadeIn and fadeOut effect like version 1. The transition is a little more visible. It seems the eagle disappears for a moment and then the coloured eagle is faded in. Be noticed my jQuery is probably crappy for this version, so pleas go ahead and change it. http://fiddle.jshell.net/gB6Sx/5/

I want to use the second version of HTML and CSS and get the transitions occur like in version 1 (more smooth). So when you mouseenterany sidebar, the eagle, feathers (of that one sidebar), the text (of that one sidebar) and that sidebar itself become coloured. When you mouseleave everything becomes gray.

Very thankful if anyone can help me out with this.

Community
  • 1
  • 1

1 Answers1

0

In Version 1 you use only change between classes. In Version 2 there is a radical change to css animations.

You should use transitions, which work with pseudoclasses and class changes, but you need to use 'transition' in your css.

Transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Here my version 3: http://fiddle.jshell.net/sPUR2/

EDITED: Oh my god! I think that definitely I understood your problem

first step: please, change the CSS to transitions.

second step: with this HTML: <section id="epic_home"> <div id="home_top">... <div id="home_right">... <div id="home_left">... </section>

don't do this: $("#epic_home").on(...);

do this: $("#home_top").on(...); $("#home_right").on(...); $("#home_left").on(...);

Delegate the events to each sidebar, no to the main container. Your version1 runs because #home_top, #home_left, #home_right have "position: absolute;" property and your section #epic_home take a height of 0 pixels.

This layout needs several changes in my opinion, but you can begin with above mentioned.

Scipion
  • 1,251
  • 1
  • 10
  • 16
  • Your version won't work for me because it has the hover effect in there. With the hover effect we can achieve two things. 1. You hover over
    and
    becomes whatever you gave it for properties inside your css. 2. You hover over
    and it's direct children become whatever you gave it for properties inside your css. In my case I want to mouseenter (which does ALMOST the same as :hover) inside my jQuery. Mouseenter over the sidebar and make the eagle, sidebar, feathers and text become coloured.
     –  Apr 25 '14 at 13:37
  • Man! Why the negative vote? my example need small modifications, just a little bit of JS Do you need all work completed?. So you you should hire me and do it for you http://fiddle.jshell.net/sPUR2/2/ – Scipion Apr 25 '14 at 18:05
  • No worries! I liked the names you gave for the id's and classes. Very original ;) Your answer is not a correct answer to my question, but it's a try. Anyway, thanks for trying. –  Apr 25 '14 at 18:53
  • I cannot understand why is not a correct answer. It is, ok, your second version of html and css but the transitions occur like in version 1, here is http://fiddle.jshell.net/sPUR2/3/ isn't it? – Scipion Apr 25 '14 at 19:21
  • Thank you. This is ALMOST the answer I am looking for. I understand what you did, but I am having trouble with traversing within jQuery. Can you please tell me how to apply this effect to only the siderbar, feather (inside that sidebar) and the text (inside that sidebar) and Eagle to get coloured. With your fiddle there is only ONE sidebar. But I am using multiple sidebars in my fiddle and don't know how to apply the effects only to that ONE sidebar I mouseenter over. If you can help me with this, I will give you full credit for it. Thanks –  Apr 25 '14 at 21:54
  • I hope it helps, but in any case if you prefers could send me a mail for meeting. – Scipion Apr 26 '14 at 18:20
  • I'm sorry but I don't understand what you mean by send me a mail or meeting. And again thanks for all the help –  Apr 27 '14 at 21:11