Open/close loop when using transition on image

Question

-- people suffering from epilepsy -- DON'T LAUNCH --

I prepared some kind of transition on image (translate + scale when hover). Almost everything works fine, but there is one problem. When I hover image, and drag mouse on the source place (green color), loops (open - close image starts really fast). How to avoid this behaviour?

https://codepen.io/anon/pen/KxmJdK

html, body{
  height: 100%;
  border: 1px solid black;
}

.container{
  border: solid red 1px;
  background-color: green;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img{
  width: 400px;
}

img:hover{
  transform: scale(1.2) translate(30%, 0);
  transition: all .2s ease-in-out;
  box-shadow: 5px 5px 10px black;
}

<div class='center container'>
  <img src='https://images.pexels.com/photos/120049/pexels-photo-120049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
</div>

You should set your `transition` on the `img` and not on the `img:hover` but I am not sure that it is what you are looking for ? — Arkellys, Sep 04 '18 at 06:14
I would achieve: hover = scale up with translate and when mouse leave image = back to source. Is it possible only with CSS? — 3D_fun, Sep 04 '18 at 06:16

Mirous · Accepted Answer · 2018-09-04T08:27:38.060

1

You can solve this problem with just one little adjustment in css:

.container img {
    display: block;
    width: 400px;
}
.container:hover img {
    transform: scale(1.2) translate(30%, 0);
    transition: all .2s ease-in-out;
    box-shadow: 5px 5px 10px black;
}

Basically u need to add the container into the equation, so it won't care if the mouse leave the image area.

codepen

edited Sep 04 '18 at 08:27

answered Sep 04 '18 at 06:17

Mirous

403
7
14

When I've gallery like section with img tags, should I wrap every img with come container like div? – 3D_fun Sep 04 '18 at 06:24
If you want to keep the same hover-logic on every image in the gallery, you'll have to wrap each individual into some other tag like
, so yes.
– Mirous Sep 04 '18 at 06:38
Almost fine, but how to remove green bar at the bottom of image? I would have image with fill parent div in 100% height/width. – 3D_fun Sep 04 '18 at 07:33
@3D_fun You can add `vertical-align: middle;` on your `img` to remove the space. https://stackoverflow.com/a/10844318/9718056 – Arkellys Sep 04 '18 at 08:20
To remove the green bar under your image just add display: block; for img selector in your CSS. I'll edit my answer so u can see it clearly. – Mirous Sep 04 '18 at 08:24

Open/close loop when using transition on image

1 Answers1