Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I would like the bottom left and right cat images to move up.

Additionally, I am interested in adding an animation effect when the user first views the images on page load, similar to this example:

Do you have any suggestions on how to accomplish either of these tasks?

Fiddle: https://jsfiddle.net/jzhang172/0jL2dyg1/

.grid{
            display:flex;
            flex-direction:row;
            justify-content:center;
            max-width:500px;
            flex-wrap:wrap;
        }

        .grid-item{
          height:150px;
          width:150px;
          overflow:hidden;

        }
        .grid-item img{
          height:100%;
        }
        .item-2{
          height:300px;
        }
<div class="grid">
          <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
          <div class="grid-item item-2"><img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"></div>
          <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
          <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
          <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
          <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
        </div>
javascriptjqueryhtmlcss

Answer №1

I found this great tutorial on a site called css-tricks and adapted it using your images!

HTML

<section id="photo-gallery">
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
  <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
</section>

CSS

#photo-gallery {
  /* Eliminate any vertical gaps */
  line-height: 0;

  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

#photo-gallery img {
  /* Ensure all images fill the space */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photo-gallery {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photo-gallery {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photo-gallery {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photo-gallery {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Does this meet your needs? Check out the live example in this fiddle.

Answer №2

Simply:

1- delete the item-2 class.

2- include margin-bottom and margin-left properties to the grid-item class:

.grid-item{
  height:150px;
  width:150px;
  overflow:hidden;
  margin-bottom: 15px;
  margin-left: 15px;
}

View this example.

Answer №3

you may want to consider implementing this example using the Masonry library:

<style type="text/css">
.grid {
  max-width:500px;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-item{
  height:100px;
  width: 100px;
  overflow:hidden;
}
.grid-sizer{
  width: 100px;
}
.item-2{
  height:200px;
}
.item-3{
  width: 300px;
}
.item-4{
  width: 400px;
}
.grid-item img{
  height:100%;
  width: 100%;
}
</style>
<div class="grid">
    <div class="grid-sizer"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
    <div class="grid-item item-2"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"></div>
    <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item item-3"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item item-4"><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
    <div class="grid-item"><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"></div>
</div>

<script type="text/javascript" src="jquery.1.11.3.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
<script type="text/javascript">
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer'
}).masonry("layout");
</script>

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

Display all files within every subdirectory located in a specified folder on Google Drive

Recently, I stumbled upon a script located at https://github.com/bluexm/snipets/blob/master/list%20Gdrive%20files%20and%20folders. The challenge I encountered was that the script was not capable of handling folders with identical names. As a result, I made ...

javascriptgoogle-apps-script

add the elements of an array to multiple div elements sequentially

I'm attempting to update all titles in .item with the values from array. The array I am using contains the following elements: var itCats = ['one', 'two', 'three', 'four']; Additionally, this is the HTML struc ...

javascriptjqueryarraysjson

Interacting with Node JS by submitting a request and obtaining a response

Hey there, I'm just starting out with Node JS and trying to grasp how client-server communication works. Here is the file on the server (express.js): app.post('/action', (req, res) => { const status = action.doAction(req); }); ...

javascriptnode.jsajaxexpress

Initiate a series of tasks and await their completion using RxJS / Redux Observables

My app requires an initialisation action to be fired, followed by a series of other actions before triggering another action. I found a similar question on Stack Overflow However, when attempting this approach, only the initial APP_INIT action is executed ...

javascriptreduxrxjsrxjs6redux-observable

Tips for efficiently updating state in recompose by utilizing setTimeout?

Curious to learn more about recompose, my journey began with a basic component: const timer: React.SFC<MyProps | any> = ({ seconds }) => ( <span>{ seconds }</span> ); I wanted to find a way to pass the seconds prop using recompose, ...

javascriptreactjsrecompose

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

I am experiencing a challenge with implementing multiple accordion menus on my website. Whenever I attempt to duplicate the code, the new accordion menu appears but clicking on the first bar simply scrolls me back to the top of the webpage. Below is the H ...

javascriptjquerycsshtml

Display a symbol retrieved from the backend server

After receiving a response from the backend server for my Angular 2/4 application, I am presented with an attribute called "connectionStatus". This attribute indicates the status of a database connection, either as "UP" or "DOWN". In order to display this ...

htmlangulartypescripticons

JavaScript function to convert a string of characters into a readable time format

Is there a way to input a string in an 'input type="time"' field in my HTML code? <label class="item item-input"> <span class="input-label">Departure Time </span> <input type="time" ng-model="heur ...

javascripthtmltime

Parsing temporary storage of database query results

My experience with OOP languages like C# and Java has been good, but I am relatively new to JavaScript/TypeScript. I find callback functions confusing, especially when using them with the BaaS ParseDB. For example, finding all playlists for a certain user ...

javascripttypescriptcallback

Ways to consistently return to the main home URL/directory within an HTML document

Greetings to all! Currently facing a challenge with HTML pathing. I want to ensure that every time I log out from Dynamics CRM Portals, I am redirected back to the "SignIn" page. The issue arises when I am in various URLs. For example, logging out from d ...

htmldynamics-365adxstudio-portalsdynamics-crm-portals

Why is the time input field in AngularJS programmed to expect a date instead?

When booking, I stored the time using $filter('date')($scope.booktime, 'mediumTime'). After booking, I have an editbooking function where I pass the time and encounter an error in the console: Error: [ngModel:datefmt] Expected 11:59:00 ...

javascriptangularjs

Different color for background of division

I am working with a structure that looks like this: <div class="wrapper"...> <a href="#"...>blah</a> <div class="post"...>stuff</div> </div> This structure repeats multiple times on a dynamic page. I am looking f ...

javascriptjquerycssdompseudo-class

Ways to clearly establish the concept of "a"

module.exports.getData = function (id) { const userData = require("./data/Users.json"); if (userData.find(user => user.uid === id)) { return user.name; } else return "User"; } I'm trying to display the name of a user, but the consol ...

javascriptnode.jsjson

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

javascriptjqueryhtmlcss

Expandable sidebar using responsive Twitter Bootstrap

I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...

jquerycsstwitter-bootstrapsidebar

Can microdata be applied to an element that embodies a pair of data points?

Can itemprop="name" and itemprop="contentURL" be included in the same element? For example: echo '<li itemscope itemtype="http://schema.org/AudioObject">'; echo ' <a itemprop="name" itemprop="contentURL" href="http://wav ...

htmlsearch-enginemicrodata

Assign individual heights to multiple iFrames according to their content's height

Dealing with multiple iframes on a single page. Each iframe is sourced from my domain. The goal is to automatically calculate and set the height of each iframe on the page. The current code sets all iframe heights to match that of a specific iframe: fun ...

javascriptjqueryhtmliframeheight

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

How to retrieve text values across various browsers using Vue.js

Whenever I type something in a text box, it displays the text value based on its ID. This code works perfectly when running it on my laptop at http://localhost:8080/. If I open the same website on my phone at http://xxx.xxx.x.xxx:8080/, it shows the same ...

javascriptvue.jswebrtcvuejs3simplewebrtc

Updating the quantity of a product within a state in React allows for easy manipulation of that

My scenario involved attempting to reduce the quantity of a product object in the UI by clicking a button, but the quantity did not update as expected. What is the recommended course of action in situations like this? let product={ a:1,b:2,c:3}; For examp ...

javascriptreactjs