Hello! This is my first ever project designing a website for my Paint & Sip biz (yay!), I have a page where I have my personal art listed as a portfolio. What I want is when you hover above an image for the image to zoom in without the dimensions of the container changing.
I thought this is simple enough and every “how-to” video also makes it look simple, it has not been simple. I have a big container to hold two more containers to act as two columns. Then, all my img elements contained in smaller containers stacked in the column containers. I can get the image to zoom when mouse hovers, but the edges of the image expand beyond the dimensions of the div container they are in. I tried using “overflow: hidden” but this doesn’t work for my small containers.
What I’ve tried:
- Overflow hidden on one of my column containers, the parent of my smaller containers. This worked for containers whose edges were the same as the big container. So, the left and right sides would keep their dimensions, but not the top and bottom.
- Getting rid of two column containers so I only have small containers set to overflow. Still didn’t work.
- I’ve changed the size of the containers to maybe better fit the image?
- used “width: 100% height: 100%” with img elements with dimensions specified in pixels for their parent containers
- All variations of the position element for parent and child containers.
- All combinations of containers and img elements with and without overflow.
I feel like I’ve tried everything, although I am sure it is a simple fix or perhaps just some weird hierarchy thing with overflow. However, I haven’t found anything about that in my research. Help would be greatly appreciated, thank you!
Project link: http://127.0.0.1:3000/portfolio/html
html:
<div id="mainbody">
<div id="sidenav">
<a href="/index/html">Home</a>
<hr>
<a href="/paintnsip/html">Paint & Sip</a>
<hr>
<a href="/ramblings-of-an-artist/html">Ramblings of an Artist</a>
<hr>
<a href="/tutorials/html">Tutorials</a>
<hr>
<a href="/knickknacks/html">Knick Knacks</a>
<hr>
<a href="/portfolio/html">Portfolio</a>
<hr>
<a href="/zines/html">Zines</a>
</div>
<div id="bigcontainer">
<div id="boxleft">
<div id="container1">
<img id="container1img" src="/img/IMG_9910.jpeg" alt="">
<div id="overlay">
<div id="text">Blue Mushroom</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: white;
font-family: Mang Gondrong, sans-serif;
cursor: url(/img/website_curser2.svg), auto;
}
@font-face {
font-family: Mang Gongrong;
src: url(Mang Gondrong.ttf);
}
#header {
cursor: url(/img/website_curser2.svg), auto;
}
h1 {
font-family: Super Arena, sans-serif;
padding-left: 250px;
padding-top: 100px;
padding-bottom: 50px;
font-size: 100px;
}
#mainbody {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-left: 40px;
z-index: 1;
cursor: url(/img/website_curser2.svg), auto;
}
#sidenav {
display: flex;
flex-direction: column;
position: sticky;
top: 100px;
width: 130px;
height: 500px;
text-align: center;
font-size: 20px;
margin-top: 20px;
margin-left: 20px;
padding: 15px 15px 15px 15px;
background-color: #d5b9f1;
color: white;
border-radius: 10px;
z-index: 2;
cursor: url(/img/website_curser2.svg), auto;
font-family: Mang Gondrong, sans-serif;
}
a {
text-align: center;
color: white;
text-decoration: none;
margin: auto;
white-space: wrap;
cursor: url(/img/website_curser2.svg), auto;
transition: 0.7s;
}
a:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 0.7s ease;
}
hr {
color: white;
margin: auto;
width: 25px;
border: solid white 1px;
}
img {
border-radius: 10px;
}
#bigcontainer {
display: flex;
flex-direction: row;
margin: 40px;
margin-top: 20px;
}
#boxleft {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 10px;
margin-right: 40px;
}
#container1 {
width: 500px;
height: 825px;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 10px;
}
#container1img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image fills the container without stretching */
transition: 0.7s ease;
border-radius: 10px;
overflow: hidden;
}
#container1:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1s ease;
max-width: 100%;
max-height: 100%;
}
I’m going to keep trying to experiment though. Thank you for your help!