As you can see I have a div that fits 3 images. When you hover over the images, the images grow. But the surrounding div does not and scroll bars appear. I do not want this.
You could hide the y axis overflow, however if I do that I won't get the zoom effect on the bottom of the images, which is something I want. So that is not ab option.
How can I fix this without any compromise?
h1 {
letter-spacing: -.015em;
font-size: 3.5rem;
font-weight: 400;
line-height: 1.1;
}
.subtitle{
font-size: 1.25em;
}
@media (min-width: 1024px) {
h1 {
letter-spacing: -.015em;
font-size: 4.5rem;
font-weight: 400;
line-height: 1.1;
}
.subtitle{
font-size: 1.65em;
}
}
@media (min-width: 768px) {
.img-container {
width:345px !important;
height:580px !important;
}
}
.img-container {
width:173px;
height:290px;
transition: all 0.2s linear;
}
.img-container:hover {
transform: scale(1.05);
transform: scale(1.05);
}<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<section id="home" class="lg:pl-28 flex flex-wrap flex-row w-full">
<div class="flex flex-col w-full lg:w-6/12 xl:w-5/12 justify-center pl-12 lg:pl-0 pr-28 pt-36 lg:pt-32 xl:pt-52">
<p class="text-md lg:text-lg text-left text-gray-500">Post Title</p>
<h1 class="mb-4 pt-5 pb-9 text-left">Title 1</h1>
<p class="subtitle leading-normal text-gray-500 mb-8 text-left">Subtitle</p>
</div>
<!--Right Col-->
<div class="w-full lg:w-6/12 xl:w-7/12 overflow-x-hidden flex items-center lg:pt-32 xl:pt-52">
<div class="flex gap-4">
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
</div>
</div>
</section>CodePudding user response：
You could add padding to the parent div so that the scrollbar won't appear because it has space in the bottom, it won't affect the child's growth.
set .w-full {padding-bottom: 15px;}
Full code here
h1 {
letter-spacing: -.015em;
font-size: 3.5rem;
font-weight: 400;
line-height: 1.1;
}
.subtitle{
font-size: 1.25em;
}
.w-full {padding-bottom: 15px;}
@media (min-width: 1024px) {
h1 {
letter-spacing: -.015em;
font-size: 4.5rem;
font-weight: 400;
line-height: 1.1;
}
.subtitle{
font-size: 1.65em;
}
}
@media (min-width: 768px) {
.img-container {
width:345px !important;
height:580px !important;
}
}
.img-container {
width:173px;
height:290px;
transition: all 0.2s linear;
}
.img-container:hover {
transform: scale(1.05);
transform: scale(1.05);
}<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<section id="home" class="lg:pl-28 flex flex-wrap flex-row w-full">
<div class="flex flex-col w-full lg:w-6/12 xl:w-5/12 justify-center pl-12 lg:pl-0 pr-28 pt-36 lg:pt-32 xl:pt-52">
<p class="text-md lg:text-lg text-left text-gray-500">Post Title</p>
<h1 class="mb-4 pt-5 pb-9 text-left">Title 1</h1>
<p class="subtitle leading-normal text-gray-500 mb-8 text-left">Subtitle</p>
</div>
<!--Right Col-->
<div class="w-full lg:w-6/12 xl:w-7/12 overflow-x-hidden flex items-center lg:pt-32 xl:pt-52">
<div class="flex gap-4">
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
</div>
</div>
</section>CodePudding user response：
The way I would do is add
margin-top: 15px;
margin-bottom: 15px;
to .img-container
That makes the most sense, to me.
CodePudding user response：
h1 {
letter-spacing: -.015em;
font-size: 3.5rem;
font-weight: 400;
line-height: 1.1;
}
.subtitle{
font-size: 1.25em;
}
@media (min-width: 1024px) {
h1 {
letter-spacing: -.015em;
font-size: 4.5rem;
font-weight: 400;
line-height: 1.1;
}
.subtitle{
font-size: 1.65em;
}
}
@media (min-width: 768px) {
.img-container {
width:345px !important;
}
}
.img-container {
width:173px;
height:290px;
transition: all 0.2s linear;
}
.img-container:hover {
transform: scale(1.05);
transform: scale(1.05);
}<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<section id="home" class="lg:pl-28 flex flex-wrap flex-row w-full">
<div class="flex flex-col w-full lg:w-6/12 xl:w-5/12 justify-center pl-12 lg:pl-0 pr-28 pt-36 lg:pt-32 xl:pt-52">
<p class="text-md lg:text-lg text-left text-gray-500">Post Title</p>
<h1 class="mb-4 pt-5 pb-9 text-left">Title 1</h1>
<p class="subtitle leading-normal text-gray-500 mb-8 text-left">Subtitle</p>
</div>
<!--Right Col-->
<div class="w-full lg:w-6/12 xl:w-7/12 flex items-center lg:pt-32 xl:pt-52">
<div class="flex gap-4">
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
<div class="flex-initial img-container">
<img src="https://via.placeholder.com/345x580">
</div>
</div>
</div>
</section>