| Showing a section and hiding the other only when hovering ein knopf | __TO SEE QUESTION GO TO THE BOTTOM __

TO SEE THE QUESTION GO TO THE BOTTOM, THE POST WAS MERGED WITH ANOTHER THING THAT I FIXED…

WebPage hover image wine bottle

I want the image to fit in the div like this:

untitled_drawing_by_doma12300-d7crok9

Here is how it looks when I hover it:
untitled_drawing_by_doma12300-d7crok9-2

–FIXED–

1 Like

First checkout object-fit property and also don’t use large image. For the scaling use transform property.

On the hover, right?

.wineLabelBoxBg:hover{
      transform: scale(1.5); 
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    
 object-fit:contain;
  z-index:1;

}
.wineLabelBoxBg {
    width: 150px;
    height: 150px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all .45s ease-in-out; 
    background-size: contain;
}

It is working perfectly fine. It is going outside viewport because your second container is placed at the top. Adjust the margin of the secondary container and it will work fine.

Could you be more specific?

I don’t know what it’s that second container placed at the top you’re talking about.

1 Like

change the margin of winebox container. Previously it was working fine, now if i hover over it, it is not scaling up.

________That’s what I want
untitled_drawing_by_doma12300-d7crok9

I don’t understand how the margin has something to do with this.

1 Like

I am not able to achieve that. I think you should open the site where you found this effect and using the devtools, learn how they are doing it.

I achieved it by adding this to my css:

.wineLabelBox {
    width: 150px;
    height: 150px;
    margin: 0px auto;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

SOLUTION OLD PROBLEM.

1 Like

Yes, that is what i was going to say.
Keep Coding.

1 Like


THAT’S THE NEW QUESTION

Showing a section and hiding the other only when hovering a button.
CODEPEN WEBSITE

___I have been trying multiple ways of doing it but to no avail…

That’s the result I want to get:


CURSOR NOT ON ADD TO CART - CURSOR ON ADD TO CART
When a user stops hovering the button it returns back to normal.

I also tried using a css approach but it didn’t work out…