Gallery

[Pusher 2 Likes (Newbie)]

Hi all,

 

This may not look like a gallery at the moment but i problem there is a method to my madness.

 

Just wondering what the best way to make only the div that is being hovered over animate instead of all of them at once.

 

Thanks,

 

Phil

See the Pen MaowJa by phillip_vale (@phillip_vale) on CodePen

[Tahir Ahmed 93 Likes (Contributor)]

ooh! same `id` applied to a number of elements i.e. `cell` and `image`. IDs are supposed to be unique. May be you intended to use `class` instead?

[Tahir Ahmed 93 Likes (Contributor)]

This may help: 

See the Pen RWgPZY by tah_med (@tah_med) on CodePen

.

 

HTML:

<section id="gallery">
  <div class="cell">
    <div class="image">this</div>
  </div>
  <div class="cell">
    <div class="image">this</div>
  </div>
  <div class="cell">
    <div class="image">this</div>
  </div>
  <div class="cell">
    <div class="image">this</div>
  </div>
</section>

CSS:

html { width: 100%; height: 100%; }body { margin: 0; padding: 0; height: 100%; width: 100%; }
#gallery { background-color: #000000; width: 100%; height: 100%; position: absolute; }
.cell { background-color: #F0F; width: 25%; height: 25%; cursor: pointer; float: left; overflow: hidden; }
.image { background-color: #FF0; width: 100%; height: 100%; position: relative; float: left; }

JavaScript:

var cells = document.getElementsByClassName('cell');
var numCells = cells.length;
var duration = 0.8;
var easeOut = Power2.easeOut;
var easeIn = Power2.easeIn;

for (var i = 0; i < numCells; i += 1) {
  cells[i].addEventListener('mouseover', inFunction, false);
  cells[i].addEventListener('mouseout', outFunction, false);
}

function inFunction(e) {
  TweenMax.to(e.target.parentNode, duration, { autoAlpha: .5, ease: easeOut });
  TweenMax.to(e.target, duration, { scale: 1.2, ease: easeOut });
}

function outFunction(e) {
  TweenMax.to(e.target.parentNode, duration, { autoAlpha: 1, ease: easeIn });
  TweenMax.to(e.target, duration, { scale: 1, ease: easeIn });
}

[Pusher 2 Likes (Newbie)]

Thank you Tahir! This is perfect.