I created a unique Instagram display for my website and I am struggling to get the images to enlarge in the center of the parent div on hover.
Earlier, I managed to somewhat achieve this (although I have since changed the code), but now when I hover over the images, all sides of the image get cut off. It seems like the containing div is not wide enough to accommodate the full size of the images at the edges.
I've experimented with different approaches to fix this issue using CSS, as shown below. Apologies in advance if the code is redundant or confusing! Thank you!
// Parent div
.instagram_feed {
overflow: hidden;
}
// Adjusts the grid size
#instagram-feed1 {
display: flex;
flex-wrap: wrap;
height: auto;
width: auto;
margin: 4em;
}
// Controls image sizes in the grid
.instagram_feed .instagram_new {
width:25%;
float:left;
padding:0 0px 5px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.instagram_feed img.insta-image {
position: absolute;
left:0;
top:0;
object-fit: cover;
width:100%;
height:100%;
transition:all 0.3s ease0s;
-webkit-transition:all 0.3s ease0s;
-moz-transition:all 0.3s ease0s;
-ms-transition:all 0.3s ease0s;
-o-transition:all 0.3s ease0s;
}
.instagram_feed .insta-link {
position:relative;
display:block;
background:#232323;
padding-top:100%;
}
// Hover settings
.instagram_feed .insta-image:hover {
opacity: 100;
background-color: rgb(41,47,51);
position:absolute;
transform: scale(2,2);
object-fit: cover;
display: block;
z-index:999;
visibility: visible;
transition-property: all;
-webkit-transition-property: all;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}