CSS fluid image gallery

I've been facing some challenges with creating a responsive image gallery. Despite using CSS and Bootstrap, I haven't had success with implementing it using the img tag or as a background.

My goal is to achieve something similar to this:

An image grid without warping or overlapping images

Even when resizing the browser window, I want the image aspect ratio to remain constant, only changing in size. As the window shrinks, I'd like two images per row, which can be achieved with col-lg-4 col-md-6.

Additionally, I would prefer to use the img tag for this as it would make it easier to create a hover effect transitioning from one image to another.

This is the HTML snippet I am currently working with:

<div class="item " data-categoryid="2">
    <div class="item-image">
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon2.jpg&quot;); display: none;">
        </div>
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon.jpg&quot;);"></div>
    </div>
    <div class="item-name">Some name</div>
    <div class="item-price">price €</div>
    <div class="item-button">
        <a href="#" class="btn btn-primary">Button.</a>
    </div>
</div>
htmlcssimagebootstrap-4

Answer №1

Bootstrap's .col classes are recommended for creating the layout: Check out this resizable jsfiddle: https://jsfiddle.net/aL1ndzgg/1/

By default, images maintain their aspect ratio unless both width and height are specified.

To achieve a hover effect, set one image in each box as position: absolute;; this way, the other image will determine the box size.

.single-image-container {
  margin-bottom: 20px;
  position: relative;
}

.single-image-container img {
  width: 100%;
}

.blocker {
  position: relative;
  overflow: hidden;
}

.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 125ms ease-in-out;
}

.single-image-container:hover .hover-image {
  opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
  </div>
</div>

Answer №2

If you want your images to adjust responsively, you can include the following CSS:

.item img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

With this code, the image will resize according to its bootstrap grid as long as the source is square.

For more tips and tricks on responsive images, check out CSS Tricks: Responsive Images

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

Shooting star css animation featuring pre and post effects

Trying to create a falling star using CSS animation. I made a star with a pseudo element, but I'm having trouble setting the animation in the pseudo-element. i{ position: relative; width: 0; height: 0; border-left: 12px solid transpa ...

htmlcss

How does conditional rending of function components in react affect the positioning of my css elements?

I'm in the process of creating a website as part of a project, where I have set up a vertical navigation bar next to the main content area. Utilizing bootstrap, I divided the layout into two main columns - one for the navigation bar and the other for ...

cssreactjsbootstrap-5

Looking for a way to customize it using @emotion/styled? Dealing with the deprecated makeStyles from MUI problem?

I have been working on setting up my styling using @emotion since makestyles were removed in React 18. Despite making changes as per my research, I am not seeing any updates reflected on my page. The expected result looks like this: https://i.stack.imgur. ...

cssreactjsmaterial-uiemotion

Issues encountered while sending HTML Form data to MySQL with Node JS

I have been experimenting with a basic html form to mysql using nodejs, but unfortunately it is not functioning as expected. The HTML file is named index.html and the Node.js file is called test.js. Below you can find my code: My HTML <!DOCTYPE html&g ...

javascripthtmlmysqlnode.jsforms

Ways to resolve the issue of undefined $route.current in AngularJS

I have recently started using AngularJS and I am encountering an error "TypeError: $route.current is undefined". Please refer to the code snippet below: var sampleApp = angular.module('sampleApp', ['ngRoute']); sampleApp.config([&ap ...

htmlangularjsangularjs-routing

Tips for resizing images to fit within a TD cell in an HTML table

Currently, I have an issue with the image display within a TD element. Despite setting a specific width for the TD, the image appears to be wider than intended. Could you offer a solution to this problem? ...

htmlcss

Error message: "Maximum width header anomaly"

I've been working on a full-width header tumblr theme and everything looks great until I resize the screen to a smaller size, like on a mobile or tablet. The header ends up cutting off and no longer maintains its full width. You can see an example of ...

htmlcsstumblr-themes

The request for http://localhost:3000/insert.js was terminated due to a 404 (Not Found) error

As someone new to web development, I am currently tackling a project where I'm having trouble loading the Javascript file insert.js. The HTML document upload.html resides in the public folder, while the Javascript file is located in the main folder. I ...

javascripthtmlnode.jsexpressweb-deployment

The dimensions of the box are not predetermined by the size of the photo

I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> ) However, the size of the container box does not adjust properly with the photos. https://i.sstatic.net/1PAQF.jpg <div className="imageGrid_ ...

javascripthtmlcssreactjsgrid

How can I design a tooltip window using HTML, jQuery, or other elements to create a box-like effect?

As someone who is new to front end development, I am facing a challenge with my web app. The requirement is that when a user hovers over an image, I need a 'box' to open nearby and display a pie chart. Although I have managed to get the hover fu ...

javascriptjqueryhtmlweb-frontend

Received undefined response from Axios.get() request

While working with the code below, I encountered an issue. The axios get request from await axios.get('/products/api') is functioning properly and I can see the data in the console. However, for await axios.get('/users/api'), 'Unde ...

javascripthtmlnode.jsreactjsexpress

What might be causing the background color to remain the same when focusing on a div element

I am trying to change the background color of a parent div when an input field within it is in focus using CSS only. However, my current code does not seem to be working as expected. This is what I have tried: .a:focus{ background-color:red; border:2 ...

cssflexbox

The Offcanvas feature is failing to function properly, resulting in the content failing to display

How are you doing? So, I have a little challenge for you! I'm currently working on implementing an Offcanvas Component in my Angular Project. It seems to be working fine, except when I activate the component, all I see is the shadow effect and no act ...

angularbootstrap-4sidebaroff-canvas-menu

PHP Warning: Attempt to access undefined variable

Whenever I try to insert a new record into my HTML, I keep encountering errors. I'm unsure if it's due to incorrect code on my end or if the issue lies with inserting the records. <?php $servername = "localhost"; $dbusername = "r ...

phphtml

What can be done to avoid a form being reset when it returns no results?

I've recently created a mysql and php search page, which is working well. However, I noticed that when the form is submitted and there are no results returned, the <option> tags get reset. Is there a way to prevent this from happening? META: I ...

phphtmlmysqlselecthtml-select

Difficulty in aligning tables with absolute positioning in Internet Explorer compared to Chrome

Encountering an issue with the alignment of elements when using position: absolute; across multiple browsers. In Chrome, everything appears properly aligned within the table. Refer to the following link for a visual: https://i.sstatic.net/qhrAi.jpg Howe ...

htmlcssgoogle-chromeinternet-explorer

Creating a CSS button that spans multiple lines within a paragraph while maintaining the appearance of an anchor tag, even in

UPDATE: The solution provided by @Dinesh karthik works well, but unfortunately it does not support IE11. I am trying to make it compatible with IE11 as well. Is there a way to make a button look like an anchor tag within a paragraph? I want the button to ...

htmlcss

Is there a way to adjust the footer to move downward automatically as new content is added to the body?

Hello friends! I encountered an issue with my website where the content in the body overlaps the footer when there is a lot of content added. I have created a navigation bar and footer separately on different pages and then included them on every page usin ...

htmlcssbootstrap-5

The word-break CSS property is ineffective in this situation

I've been experimenting with the word-break css property, but I just can't seem to get it to work even when using a simple example. Here's my code: React: render() { return ( <h5 className="word-break">A very very long line.... ...

javascripthtmlcssreactjs

What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

What is the best way to use relative positioning to show two lines of information on an image without the order of information interfering with each other? I want the Files badge to appear at the bottom of the image, with the MusicBrainz and Discogs badge ...

htmlcssbootstrap-4