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

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

#1

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–


Showing a section and hiding the other only when hovering a button
#2

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


#3

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

#4

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.


#5

Could you be more specific?

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


#6

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


#7

________That’s what I want
untitled_drawing_by_doma12300-d7crok9

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


#8

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.


#9

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.


#10

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


#11


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…