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:
Here is how it looks when I hover it:
–FIXED–
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:
Here is how it looks when I hover it:
–FIXED–
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.
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
I don’t understand how the margin has something to do with this.
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.
Yes, that is what i was going to say.
Keep Coding.
…
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:
I also tried using a css approach but it didn’t work out…