Gallery

[Guest Pusher]

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]

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]

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 });
}

[Guest Pusher]

Thank you Tahir! This is perfect.