CODEWITHSUNDEEP
htmlcsscss-transitions
Thread7
Thread7

Reputation: 1090

Issue with CSS Enlarge on Hover Effect

I found a nice tutorial for making my images enlarge (like a zoom effect) on hover. The main difference between my needs and a tutorial is that I want my all images contained in a single box like container. So when I implemented the tutorial I realize that part of the enlarged image gets cut off when you hover. The effect is constrained to the container. I would like a way for the zoom to go wherever it needs to go on the page. (So you can see the whole zoomed image) Here is my implementation of the tutorial: http://mulnix.contestari.com/wp/example225/1.php

JSFiddle: http://jsfiddle.net/dsRAH/ Original Code

Upvotes: 1

Views: 4658

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

Remove the overflow: hidden and all other overflows,
than for your images containers DIV remove float:left; and add display:inline-block;

* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  background: #000;
  color: #fff;
  z-index: 0;
}

.photos {
  position: relative;
  display: flex;
  flex-flow: row wrap;
}

.photo {
  box-shadow: 0 0 0 2px  #444;
  margin: 5px;
  position: relative;
  max-height: 200px;
  transform: translateZ(0);
  transition: transform 0.5s;
}

.photo:hover {
  z-index: 1;
  transform: translateZ(0) scale(1.6);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-legend {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1em;
  background: rgba(0,0,0,0.3);
}
<div class="wrapper">
  <div class="photos">
    <div class="photo">
      <img src="https://placehold.it/200x150/0bf" />
      <div class="photo-legend">TEST DESCRIPTION</div>
    </div>
    <div class="photo">
      <img src="https://placehold.it/200x200/f0b" />
    </div>
    <div class="photo">
      <img src="https://placehold.it/200x150/bf0" />
    </div>
  </div>
</div>

Upvotes: 2

vals
vals

Reputation: 64164

I would suggest giving your divs one of the following classes:

  • colleft for the ones that are at left column
  • colright for the ones that are at right column
  • rowtop for the ones at the top row
  • rowbottom for the ones at the bottom row

And then assign them the following properties

.colleft {
    transform-origin-x: 0%;
}

....

    transform-origin-x: 100%;
    transform-origin-y: 0%;
    transform-origin-y: 100%;

(respectively)

That will make the zoom go in the desired direction.

evan stoddard modified fiddle

Upvotes: 1

vitdes
vitdes

Reputation: 124

You can try to use z-index. An element with greater z-index is always in front of an element with a lower z-index. If you main container is not overflow:hidden than you can try this out.

here is an example where you can see how it works. Hope that is helpful.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Upvotes: 1

evan.stoddard
evan.stoddard

Reputation: 698

It's not perfect but it's a start. I changed the overflow:hidden; in the wrapper to visible. I also put your code into jsfiddle so people can tinker with it.

http://jsfiddle.net/m8FXH/

Upvotes: 1

Related Questions