CSS

Question

I'm looking to create something akin to the Mac App Dock. Basically, I have an number of divs all next to each other with the same class, and a unique ID (done through php).

Currently, when you hover over one element, it magnifies it using transform, however this doesn't affect the elements adjacent to them.

I'm wondering if there's a way to essentially make it so item-2 has a hover effect of transform:scale(2.0), and upon hovering over that element, item-1 & item-3 would get an effect of transform:scale(1.5);

Although, I imagine this is impossible in css. If so, is there a way I can achieve this effect in php or javascript somehow?

Check out this vid, when not related to the dock, I have often seen this affect called a "tsunami" youtube.com/watch?v=P1ASs40iows — Mattt
– Mattt, Commented Mar 24, 2014 at 21:52

ryanwinchester · Accepted Answer · 2014-03-25 22:44:17Z

1

This is tricky since transform: scale doesn't seem to behave consistently across browsers.

I put together some CSS and Javascript to do what you described, although making it look good on all browsers would take much more time.

Try out my demo here: CodePen

HTML

<ul id="list">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
  <li><a href="#">Six</a></li>
</ul>

#list li:hover {
  zoom: 2;
  -webkit-transform: scale(2);
  -moz-transform:    scale(2);
  -ms-transform:     scale(2);
  -o-transform:      scale(2);
  transform:         scale(2);
  position: relative;
  z-index: 999;
 }
.beside {
   zoom: 1.5;
  -webkit-transform: scale(1.5);
  -moz-transform:    scale(1.5);
  -ms-transform:     scale(1.5);
  -o-transform:      scale(1.5);
  transform:         scale(1.5);
 }

Javascript (jQuery)

  $('#list li').on("mouseenter", function() {
    $(this).prev().addClass("beside");
    $(this).next().addClass("beside");
  });
  $('#list li').on("mouseleave", function() {
    $(this).prev().removeClass("beside");
    $(this).next().removeClass("beside");
  });

edited Mar 25, 2014 at 22:44

answered Mar 24, 2014 at 21:06

ryanwinchester

12.2k5 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mattt Over a year ago

Good concept, the besides don't seem to zoom though.

ryanwinchester Over a year ago

What browser are you using? It works for me in Chrome on Ubuntu.

ryanwinchester Over a year ago

@MattThompson I just tested in firefox and it doesn't work :(

ryanwinchester Over a year ago

I updated to make it work in Firefox, but it's not as pretty. there is some overlapping. You would have to play with the styling to tweak it to your needs.

Collectives™ on Stack Overflow

CSS - Using hover to affect multiple elements differently

1 Answer 1

HTML

CSS

Javascript (jQuery)

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

Javascript (jQuery)

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related