Enhance your website with dynamic effects by incorporating CSS3 columns and responsive layouts. Utilize CSS3 or jQuery/JavaScript to

I have decided to create a masonry style layout using CSS3 for the columns, which has made building the layout easier and more precise. This is especially useful as I am working on a responsive design.

Currently, I am implementing CSS3 media queries to adjust the number of columns displayed based on the window size. What I would like to do next is animate the repositioning of elements within the columns when the number of columns changes due to resizing the window.

Below is an excerpt of my CSS code:

@media all and (min-width: 961px) and (max-width: 1599px){
    #portfolio {
        width:100%;
        position:relative;
        text-align:center;
        -moz-column-count:4;
        -moz-column-gap:3px;
        -webkit-column-count:4;
        -webkit-column-gap:3px;
        column-count:4;
        column-gap:3px;
    }
}
@media all and (min-width: 1600px){
    #portfolio {
        width:100%;
        position:relative;
        text-align:center;
        -moz-column-count:5;
        -moz-column-gap:3px;
        -webkit-column-count:5;
        -webkit-column-gap:3px;
        column-count:5;
        column-gap:3px;
    }
}

If anyone has suggestions on how to achieve this effect, I would greatly appreciate it. Thank you in advance!

jquerycssanimationtransitionmultiple-columns

Answer №1

Check out the animation property:

/* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 1s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 1s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 1s;

For an example, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with maintaining image aspect ratio; unable to utilize background-image: cover property

If what I am attempting is not feasible, please inform me. I am currently working on displaying images of various sizes without distortion. While most images look good, those with a smaller width than the container of 285px are getting distorted. I am fin ...

htmlcssimage

The process of uploading data onto a map using jquery is quite inconsistent in its functionality

HTML Instructions: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <me ...

javascriptjqueryajaxcouchapp

unable to respond when clicking an angularjs link

I'm facing an issue where I can't get a link to respond to click events in AngularJS. When I click on the anchor link, nothing happens. Here is a snippet of the AngularJS script: <script data-require="<a href="/cdn-cgi/l/email-protection" ...

javascriptjqueryhtmlangularjs

Tips for inserting JavaScript code following the generation of a fresh row in Sonata Type Collection

It has come to my attention that the following code can be found in the file ../vendor/sonata-project/doctrine-orm-admin-bundle/Sonata/DoctrineORMAdminBundle/Resources/views/CRUD/edit_orm_one_association_script.html.twig. This code is responsible for creat ...

jquerysymfony-2.1sonata-admin

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...

javascripthtmlcssangularjs

Stop div from exceeding the page boundaries

Here's my current dilemma: I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I ...

jquerycsstooltip

Exploring the varying treatment of the noscript tag across different web browsers

I've been searching everywhere, but I can't find any information on this topic. What I really want to understand is what browsers do with the content inside a noscript tag when JavaScript is enabled. Let's consider an example: According t ...

javascripthtmlcsscross-browsernoscript

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

Currently, I am working on developing a to-do list application using HTML, CSS, and JavaScript. The application includes a text input field for users to enter their tasks, along with an "Add Task" button. However, I want to enhance the user experience by a ...

javascripthtmlcssdeploymenttodo

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

htmlcssvue.js

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss

Looking for assistance in creating a stunning portfolio showcase?

As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...

htmlcss

Ways to incorporate color gradients into the corners of CSS cards

Below is an example of a basic bootstrap card: Example 1: https://i.stack.imgur.com/DK2Sz.png I attempted to draw blue and green colors side by side, but was only successful in drawing blue as shown below: Example 2: https://i.stack.imgur.com/CcSzP.png ...

htmlcsstwitter-bootstrapbootstrap-4

jQuery.ajax Failure Response

When using MVC on the server side and calling a function with jQuery.Ajax that returns JSON, an exception is being thrown. How can I invoke the error handling function of Ajax by sending something back in the return JSON function? MVC Function public Jso ...

javascriptjqueryajaxjson

Tips for preventing redundant AJAX calls following a setTimeout

I have a text field where I check the database for matches when users type. However, I want to avoid overloading the database with unnecessary queries if someone quickly types several characters. After browsing the internet, it seems like the recommended ...

javascriptjqueryajax

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

htmlcsscss-selectors

Executing jQuery callback functions before the completion of animations

My issue revolves around attempting to clear a div after sliding it up, only to have it empty before completing the slide. The content I want to remove is retrieved through an Ajax call. Below you will find my complete code snippet: $('.more& ...

javascriptjqueryajax

Manage several scrolls using overflow:auto

There are numerous popups on a page with the overflow:auto property. The structure is as follows - <div id="popup1"> <div>SomeHTMLSTRUC</div> <div>SomeHTMLSTRUC</div> <ul class="scroll"></ul> </div> ...

htmlcss

Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar c ...

htmlcssbootstrap-4bootstrap-5

The outcomes of my JavaScript code are not aligning with my expectations

I've been experimenting with printing objects from an API using JSON and AJAX, and I noticed that the console.log works perfectly to display the output. However, I'm having a bit of trouble with my generateCreatureDiv function as it doesn't ...

javascriptjqueryhtml

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

htmlcss