HTML CSS Hover position not aligning with container - html

Question

I'm currently working on my code where i tried making a responsive image gallery with a hover effect. At my first code I created, the effects are working great. However, it is not responsive as it stays in 4 rows always. Please see this Codepen 1
When I tried to change some of the contents of my style.css using flexbox, i was able to make it responsive and change its size depending on the window size. However, whenever you hover to the image, the hover box does not align with the container itself. Please see this Codepen2
The codes are written on the codepen itself. The only code i changed in the 1st code to the 2nd one is this (I commented the previous code instead of removing it to remember which part i changed:
.container
{
/*width: 1280px;
margin: 70px auto 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;*/
margin: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flexbox-wrap : wrap;
-ms-flexbox-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
.container .box
{
/*position: relative;
width: 300px;
height: 300px;
background: #ff0;
margin: 10px;
box-sizing: border-box;
display: inline-block;*/
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 300px;
margin: .5vw;
}
.container .box .imgBox img
{
/*max-width: 100%;*/
width: 100%;
height: auto; /*added this*/
transition: transform 2s;
}
Please do help me figure out why the hover position is not working. Thanks

Answer 1

You could modify the width's of the container so that it size is defined by relative positioning, this will solve your issue.
The only change that is to be made is to the div with class container, shown below.
.container {
width: 80%;
margin: 0px auto;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
Please check the below example.
body {
margin: 0;
padding: 0;
background: #262626;
font-family: sans-serif
}
.container {
width: 80%;
margin: 0px auto;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.container .box {
position: relative;
width: 300px;
height: 300px;
background: #ff0;
margin: 10px;
box-sizing: border-box;
display: inline-block;
}
.container .box .imgBox {
position: relative;
overflow: hidden;
}
.container .box .imgBox img {
max-width: 100%;
transition: transform 2s;
}
.container .box:hover .imgBox img {
transform: scale(1.2);
}
.container .box .details {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, .8);
transform: scaleY(0);
transition: transform .5s;
}
.container .box:hover .details {
transform: scaleY(1);
}
.container .box .details .content {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
padding: 15p;
color: #fff;
}
.container .box .details .content h1 {
margin: 0;
padding: 0;
font-size: 20px;
color: #ff0;
}
.container .box .details .content p {
margin: 10px 0 0;
padding: 0;
}
<div class="container">
<div class="box">
<div class="imgBox">
<img src="http://www.gstatic.com/webp/gallery/1.jpg">
</div>
<div class="details">
<div class="content">
<h1> Snow Queen Elsa </h1>
<p>Elsa is the daughter of Agnarr and Iduna, older sister of Anna, and queen of Arendelle. Elsa was born with the powers to manipulate ice and snow and used them to entertain her sister. </p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="http://www.gstatic.com/webp/gallery/2.jpg">
</div>
<div class="details">
<div class="content">
<h1> The Little Mermaid Ariel </h1>
<p>Ariel as she appears in her mermaid form in Disney's The Little Mermaid. Ariel is a fictional character and the title character of Walt Disney Pictures' 28th animated film The Little Mermaid (1989). She is often rebellious, and in the first film,
she longs to be a part of the human world. </p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="http://www.gstatic.com/webp/gallery/3.jpg">
</div>
<div class="details">
<div class="content">
<h1> Sleeping Beauty Aurora </h1>
<p>Princess Aurora, also known as Sleeping Beauty or Briar Rose, is a fictional character who appears in Walt Disney Pictures' animated feature film Sleeping Beauty (1959). Originally voiced by singer Mary Costa, Aurora is the only daughter of King
Stefan and Queen Leah. </p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="http://www.gstatic.com/webp/gallery/4.jpg">
</div>
<div class="details">
<div class="content">
<h1> Aladdin's Jasmine </h1>
<p>Princess Jasmine is the deuteragonist of Disney's 1992 animated feature film, Aladdin. She is from the Middle Eastern kingdom of Agrabah where her father, the Sultan, rules. Jasmine was born into a role and society that treats her as an object
and a tool, rather than a person </p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="http://www.gstatic.com/webp/gallery/5.jpg">
</div>
<div class="details">
<div class="content">
<h1> Rupunzel </h1>
<p>Princess Rapunzel (voiced by Mandy Moore) is more assertive in character, and was born a princess. Her long blonde hair has magical healing and restoration powers. A woman named Mother Gothel (voiced by Donna Murphy) kidnaps Rapunzel for her magical
hair which would help maintain her youth. </p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="http://www.gstatic.com/webp/gallery/5.jpg">
</div>
<div class="details">
<div class="content">
<h1> Megara </h1>
<p>In Greek mythology, Megara was the oldest daughter of Creon, king of Thebes. Megara was offered by her father to Hercules because he defended Thebes. She had two children, a boy and a girl, but was killed with both of them by Hercules in excess
of madness caused by Hera. </p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="c">
</div>
<div class="details">
<div class="content">
<h1> Belle The Beauty </h1>
<p>Belle is a fictional character who appears in Walt Disney Pictures' animated feature film Beauty and the Beast (1991). Originally voiced by American actress and singer Paige O'Hara, Belle is the non-conforming daughter of an inventor who yearns
to abandon her predictable village life in return for adventure. </p>
</div>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="http://www.gstatic.com/webp/gallery/1.jpg">
</div>
<div class="details">
<div class="content">
<h1> Mulan The Great Warrior Of China </h1>
<p>Mulan (full name Fa Mulan) is a character, inspired by an actual historic figure, who appears in Walt Disney Pictures' animated feature film Mulan (1998), as well as its sequel Mulan II (2004). </p>
</div>
</div>
</div>
</div>