The CSS elements are positioned beneath the top border when applying a scale transformation within columns

Question

The CSS elements are positioned beneath the top border when applying a scale transformation within columns

I have a layout with 4 columns of images that I want to scale on mouse hover using the 'column-count' property.

The first column works correctly, but the next three end up positioned under the upper border during the transformation.

I've experimented with different margins and padding values, as well as tried using 'z-index', but nothing seems to work.

Check out the live example on JSFiddle

Here is the code snippet:

.content{
            margin-top: 20px;
            background-color: black;
        }

        .photos img {
            margin-bottom: 10px;
            vertical-align: middle;
            height: auto;
            width: 100%;
        }

        .photos {
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            -webkit-column-gap: 10px;
            -moz-column-gap: 10px;
            column-gap: 10px;
        }

        li img {
            -webkit-transition: 0.2s;
        }


        li img:hover {
            -webkit-transition: .5s;
            transform: scale(1.3);
        }

<div class="content">
            <ul class="photos">
                <li>
                    <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
                </li>

                <li>
                    <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
                </li>

                <li>
                    <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
                </li>

                <li>
                    <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
                </li>

            </ul>
        </div>

html css

Answer 1

Answer №1

If you want to achieve a similar behavior, consider transitioning to flexbox.

Simply adjust your CSS code like this:

.photos {
    display: flex;
}

li {
  width: 25%;
}

For a live demonstration, check out this Codepen link: https://codepen.io/alezuc/pen/jObWjLm

Update:

To accomplish the layout described in the comment below, I recommend utilizing a pure CSS Masonry approach. Here's the suggested code snippet:

<div class="content">
   <div class="item">
      <img src="image-url-here.jpg">
   </div>
   (additional item divs with image sources)
   <span class="item break"></span>
   (additional span elements for breaking columns)
</div>

Check out the CSS code below:

.content {
  background-color: black;
  display: flex;
  (additional CSS properties)
}

.item {
  width: 24%;
  (additional CSS properties for items)
}

.break {
  flex-basis: 100%;
  (additional CSS properties for column breaks)
}

img {
  max-width: 100%;
  height: auto;
  transition: 0.2s;
}

img:hover {
    transition: .5s;
    transform: scale(1.12);
}

View the functional Codepen here: https://codepen.io/alezuc/pen/MWayKaq

For further insights on this technique, refer to this resource.

Answer 2

If you want to achieve a similar behavior, consider transitioning to flexbox.

Simply adjust your CSS code like this:

.photos {
    display: flex;
}

li {
  width: 25%;
}

For a live demonstration, check out this Codepen link: https://codepen.io/alezuc/pen/jObWjLm

Update:

To accomplish the layout described in the comment below, I recommend utilizing a pure CSS Masonry approach. Here's the suggested code snippet:

<div class="content">
   <div class="item">
      <img src="image-url-here.jpg">
   </div>
   (additional item divs with image sources)
   <span class="item break"></span>
   (additional span elements for breaking columns)
</div>

Check out the CSS code below:

.content {
  background-color: black;
  display: flex;
  (additional CSS properties)
}

.item {
  width: 24%;
  (additional CSS properties for items)
}

.break {
  flex-basis: 100%;
  (additional CSS properties for column breaks)
}

img {
  max-width: 100%;
  height: auto;
  transition: 0.2s;
}

img:hover {
    transition: .5s;
    transform: scale(1.12);
}

View the functional Codepen here: https://codepen.io/alezuc/pen/MWayKaq

For further insights on this technique, refer to this resource.

Answer 3

Answer №2

It seems like the issue with the columns is that the browser may be getting confused and placing the non-first images lower down on the page.

I have come up with two potential solutions to fix this problem, with my favorite being: display: flex;

.content{
    margin-top: 50px;
    background-color: black;
}

.photos img {
    margin-bottom: 10px;
    vertical-align: middle;
    height: auto;
    width: 100%;
}

.photos {
    padding: 0;
    list-style: none;
    display: flex;
}

.photos li{
  flex-basis: 25%;
  padding: 0 5px;
  margin: 0;
}

li img {
    -webkit-transition: 0.2s;
}


li img:hover {
    -webkit-transition: .5s;
    transform: scale(1.12);
}

<div class="content">
    <ul class="photos">
        <li>
            <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
        </li>

        <li>
            <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
        </li>

        <li>
            <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
        </li>

        <li>
            <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
        </li>

    </ul>
</div>

Other potential fixes involving your column settings include adding position: absolute to .photos img or using float: left on .photos.

Edit: I noticed that Alessio posted his answer while I was writing mine and he also suggests using float. Consider accepting his solution if you choose the float approach.

Answer 4

It seems like the issue with the columns is that the browser may be getting confused and placing the non-first images lower down on the page.

I have come up with two potential solutions to fix this problem, with my favorite being: display: flex;

.content{
    margin-top: 50px;
    background-color: black;
}

.photos img {
    margin-bottom: 10px;
    vertical-align: middle;
    height: auto;
    width: 100%;
}

.photos {
    padding: 0;
    list-style: none;
    display: flex;
}

.photos li{
  flex-basis: 25%;
  padding: 0 5px;
  margin: 0;
}

li img {
    -webkit-transition: 0.2s;
}


li img:hover {
    -webkit-transition: .5s;
    transform: scale(1.12);
}

<div class="content">
    <ul class="photos">
        <li>
            <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
        </li>

        <li>
            <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
        </li>

        <li>
            <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
        </li>

        <li>
            <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
        </li>

    </ul>
</div>

Other potential fixes involving your column settings include adding position: absolute to .photos img or using float: left on .photos.

Edit: I noticed that Alessio posted his answer while I was writing mine and he also suggests using float. Consider accepting his solution if you choose the float approach.

The CSS elements are positioned beneath the top border when applying a scale transformation within columns

Answer №1

Update:

Answer №2

Similar questions

Tips for effectively deleting a flash object from an HTML page

Wrap the json response in HTML elements

Scrolling down a jQuery div after each new item is added.OR

Submitting forms with Ajax in IE(8)

Pressing a key once causing two actions when managing content in a separate window

Transitioning background with background sizing set to cover

Import JSON Data into Angular-nvD3 Chart (AngularJS)

Choose all list elements except the final one

Styling the tab view in PrimeFaces

Concealing information based on the value of a variable

Modify the td attributes while retaining the extracted data values from the website

Materialize CSS is throwing an error: 'velocity is not a function'

Images with full-width will scroll horizontally

Modify the appearance of a nested div using CSS hover on the main JSX container

Mouse over the background of an image in jQuery to create a fade-in effect, without affecting any content inside

Having trouble locating and scrolling through elements while webscraping with Python Selenium, encountering the 'cannot focus element' error

Tips for keeping a Bootstrap Modal in a fixed position on the screen as you scroll

Create a layout using jquery-tokeninput

What is the best way to eliminate empty spaces from the container?

transforming unicode into regular characters prior to being presented on a webpage