Help on CSS transform effect

Discussion in 'App Development' started by blueraincap, Apr 29, 2020.

  1. I am making a bookshelf as below:
    https://codepen.io/abc-analytics/pen/ExVvWqN

    As you can see in the CSS, I scale the book image up when the image is hovered, which also brings up a meta box from below. When you hover over the review-stars, the entire box will show up, but the image will shrink back to normal size.

    My question is how can I maintain the scaled image size when viewing its full meta box? That is, how can I make the scaled image shrink back only when I move away from that flex item.

    Been thinking for hours but to no avail. The image and the meta are two different elements, don't know how to keep one's hover effect when i must hover away from it to hover another.
     
    Last edited: Apr 29, 2020
  2. closed.
    by adding a wrapper on top with visibility: visible then visibility: hidden.