Arranging a series of images with unique effects and clickable links in a single row

How do I center these images on any monitor size, regardless of the screen dimensions?

I've experimented with various methods like “left: auto;, relative, -10%, …”

I'm not sure if they are inside a container or not, but if I could place them in one and solve everything at once, that would be great.

figure.snip0015 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  max-width: 340px;
  max-height: 200px;
  background: #000000;
  text-align: center;
}

}
figure.snip0015 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
... (omit the rest for brevity) ...
<figure class="snip0015">
  <img src="http://open-sky.org/images/rough.jpg" alt="sample38" />
  <figcaption>
    <p>&nbsp;</p>
    <h5>- Roughnecks -</h5>
    <a href="http://www.open-sky.org/index.php/roughnecks"></a>
  </figcaption>
</figure>
... (repeat the code snippet for the remaining figures) ...

htmlcss

Answer №1

The alignment of the images was off due to the figure elements being inline-blocks without a proper container for controlling layout, and the absence of a flexbox container.

Resolution: I enclosed the images within a flex container (.image-container), utilized display: flex to center the figures horizontally, and incorporated flex-wrap: wrap for responsiveness on various screen sizes.

/* Ensure the container is centered */
.image-container {
  display: flex;
  justify-content: center;  /* Centers all figure elements horizontally */
  flex-wrap: wrap;           /* Allows figures to wrap on smaller screens */
  gap: 20px;                 /* Optional spacing between figures */
  padding: 20px;             /* Optional padding around the container */
  align-items: center;       /* Optional for vertical centering */
}

figure.snip0015 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  position: relative;
  width: 100%;
  max-width: 340px;          /* Maximum figure width */
  max-height: 200px;         /* Maximum figure height */
  background: #000000;
  text-align: center;
  overflow: hidden;
}

figure.snip0015 * {
  box-sizing: border-box;
}

figure.snip0015 img {
  opacity: 1;
  width: 100%;  /* Image fills the figure */
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}

figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}

figure.snip0015:hover img {
  opacity: 0.35;
}

figure.snip0015:hover figcaption h5 {
  opacity: 1;
}

figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
}
<div class="image-container">
  <figure class="snip0015">
    <img src="http://open-sky.org/images/rough.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Roughnecks -</h5>
      <a href="http://www.open-sky.org/index.php/roughnecks"></a>
    </figcaption>
  </figure>
  
  <figure class="snip0015">
    <img src="http://open-sky.org/images/long.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Longistics -</h5>
      <a href="http://www.open-sky.org/index.php/longgistics"></a>
    </figcaption>
  </figure>

  <figure class="snip0015">
    <img src="http://open-sky.org/images/rnd.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Research & Development -</h5>
      <a href="http://www.open-sky.org/index.php/r-d"></a>
    </figcaption>
  </figure>

  <figure class="snip0015">
    <img src="http://open-sky.org/images/force.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- F.O.R.C.E. -</h5>
      <a href="http://www.open-sky.org/index.php/force"></a>
    </figcaption>
  </figure>

  <figure class="snip0015">
    <img src="http://open-sky.org/images/med.jpg" alt="sample38" />
    <figcaption>
      <p>&nbsp;</p>
      <h5>- Trauma -</h5>
      <a href="http://www.open-sky.org/index.php/trauma"></a>
    </figcaption>
  </figure>
</div>

Answer №2

.container {
          width: 100%;
          margin: 0 auto;
          text-align: center;
        }
        figure.snip0015 {
          display: inline-block;
          margin-left: auto;
          margin-right: auto;
          color: #fff;
          position: relative;
          width: 100%;
          margin: auto;
          overflow-x: hidden;
          max-width: 340px;
          max-height: 200px;
          background: #000000;
          text-align: center;
        }
        
        .figure.snip0015 * {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        .figure.snip0015 img {
          opacity: 1;
          width: 100%;
          -webkit-transition: opacity 0.35s;
          transition: opacity 0.35s;
        }
        .figure.snip0015 figcaption {
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 3em 3em;
          width: 100%;
          height: 100%;
        }
        .figure.snip0015 figcaption::before {
          position: absolute;
          top: 50%;
          right: 30px;
          bottom: 50%;
          left: 30px;
          border-top: 1px solid rgba(255, 255, 255, 0.8);
          border-bottom: 1px solid rgba(255, 255, 255, 0.8);
          content: "";
          opacity: 0;    
          background-color: #ffffff;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
        }
        .figure.snip0015 h5,
        .figure.snip0015 p {
          margin: 0 0 5px;
          opacity: 0;
          -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
          transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;
        }
        .figure.snip0015 h5 {
          word-spacing: -0.05em;
          font-weight: 300;
          text-transform: uppercase;
          -webkit-transform: translate3d(0%, 50%, 0);
          transform: translate3d(0%, 50%, 0);
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
        .figure.snip0015 h5 span {
          font-weight: 800;
        }
        .figure.snip0015 p {
          font-weight: 200;
          -webkit-transition-delay: 0s;
          transition-delay: 0s;
        }
        .figure.snip0015 a {
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          position: absolute;
          color: #ffffff;
        }
        .figure.snip0015:hover img {
          opacity: 0.35;
        }
        .figure.snip0015:hover figcaption h5 {
          opacity: 1;
          -webkit-transform: translate3d(0%, 0%, 0);
          transform: translate3d(0%, 0%, 0);
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
        .figure.snip0015:hover figcaption p {
          opacity: 0.9;
          -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
        }
        .figure.snip0015:hover figcaption::before {
          background: rgba(255, 255, 255, 0);
          top: 30px;
          bottom: 30px;
          opacity: 1;
          -webkit-transition-delay: 0s;
          transition-delay: 0s;
        }
        <div class='container'>
          <figure class="snip0015">
            <img src="http://open-sky.org/images/rough.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Roughnecks -</h5>
                <a href="http://www.open-sky.org/index.php/roughnecks"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/long.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Longistics -</h5>
                <a href="http://www.open-sky.org/index.php/longgistics"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/rnd.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Research & Development -</h5>
                <a href="http://www.open-sky.org/index.php/r-d"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/force.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- F.O.R.C.E. -</h5>
                <a href="http://www.open-sky.org/index.php/force"></a>
            </figcaption>           
        </figure>
        <figure class="snip0015">
            <img src="http://open-sky.org/images/med.jpg" alt="sample38"/>
            <figcaption>
        <p>&nbsp;</p>
                <h5>- Trauma -</h5>
                <a href="http://www.open-sky.org/index.php/trauma"></a>
            </figcaption>           
        </figure>
        </div>

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

Is it possible to loop through a directory containing images and dynamically generate a CSS rule that positions each image based on its

I'm not very familiar with PHP so I could use your expertise in coming up with the most efficient and straightforward solution for this specific task. In my directory "path/images/headers," I have multiple header images all cut to the correct size, ea ...

phpcssimage

The background image is being cropped outside the item. What steps should I take to display it properly?

I am facing an issue with positioning a background image just outside the lime container. When I position it correctly, any part of the image that extends beyond the container gets cut off. How can I display the whole image even if it is outside the conta ...

csshtml-listsbackground-image

"Enhance your website with the dynamic Twitter Bootstrap dropdown navigation

Is it possible to implement a dropdown menu using twitter bootstrap? The current navigation setup is as follows: <ul class="nav nav-tabs " style="width: 860px;"> <li > <a href="#" >Employees</a> </li> <li > < ...

phphtmldrop-down-menutwitter-bootstrap

Placing a document.write statement inside the load function of a fresh Dashcode template prevents the generation of the remaining JavaScript code

I've been working on a new custom safari template using dashcode ("This template creates a blank web application, ready for customizing."). In the process, I noticed that it automatically generates a function called load in main.js that is then called ...

javascripthtmldashcode

DjangoPDFViewer

I need help figuring out how to integrate a PDF Viewer into my Django website. Right now, I'm using an iframe to show the PDF, but I want to add annotation functionality directly on the site. I've looked into using PDF.js, but it means incorporat ...

htmldjangopdfpdf.jsng2-pdfjs-viewer

Having trouble getting JavaScript validation to function properly

I'm struggling to make validation work properly when hitting the submit button. No alert messages appear, even though I should be receiving alerts for empty fields. Can someone identify what is wrong with my code? I have tried checking the validation ...

javascripthtmlcssvalidation

Getting two child elements to be perfectly centered vertically

I have encountered a similar issue to many others, but despite trying various solutions, I can't seem to identify where I am going wrong. My parent element is supposed to display 3 blocks of information across the screen, each consisting of a large ic ...

htmlcssdisplay

I'm having trouble figuring out the code for the path in the POST request for my basic login form application

I have built a basic login form application in node.js. Although I can successfully display the login form and input login data, my POST request to capture the login data is not functioning correctly. I am encountering a POST http://localhost:3000/client 4 ...

javascripthtmlnode.jsexpresspost

Delivering HTML with Python Socket Server

I am currently learning about HTTP/CGI and exploring how to display HTML content on a webpage through the use of the socket library in Python. However, I am encountering some confusion regarding the correct syntax for this task: #!/usr/bin/env python impo ...

pythonhtmlsocketshttp

Issues with functionality of an HTML form select utilizing jQuery

I have implemented the following code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select name="cars" id="dynamic_select"> <option value="http://www.visionabacus.com/Australia/1/SuiteA ...

javascriptjqueryhtmlcss

The default padding and margin in Bootstrap are making the images protrude beyond the edges of the container

I have an issue where my images are stretching into the padding or margin that bootstrap uses to separate columns. I want to maintain the column division but avoid having the images stretch. While I have managed to shrink the image using padding, the white ...

htmlcsstwitter-bootstrap

Create HTML content from a file retrieved from the server

I have been working on a dynamic website project, diving into web development from scratch despite having coding experience in general. As I navigate Angular CLI and Bootstrap, I've come across a fundamental question: Do modern websites house all thei ...

javascripthtmlangular

Why aren't jQuery events triggering following an AJAX request?

I have created a website that utilizes fading effects to transition between sections while loading new content. One of the features includes enlarging an image upon clicking, which is achieved through a jQuery event trigger. The issue I am facing is that ...

phpjavascripthtmljquery

Transforming the mui stepper connection into a progress bar is simple. Each step contains individualized content to guide you through the process

Is there a way to make the MUI stepper connector act as a progress indicator? I have step content and connectors as separate divs, but I'm having trouble styling them. Any assistance would be greatly appreciated! ...

javascriptcssreactjsmaterial-ui

I am encountering issues with my JavaScript code not functioning properly

I am currently working on a website project in HTML where I need to retrieve JSON-formatted data using JavaScript and then display it on the site. However, I am facing an issue as I cannot seem to identify any errors in my code. I followed this sample code ...

jqueryhtmljson

When converting the .html file to a .php file, the CSS file fails to be linked correctly

The issue I'm facing seems to be specific to the index.html file. The CSS that functions properly with an html extension suddenly stops working when the extension is changed to php. Upon inspecting the reference link in both cases, I noticed that when ...

phphtmlcsszurb-foundation

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

I'm struggling to pass the value from a dropdown list in the parent ASPX form to a textbox in the child ASPX form. Parent JavaScript: The first script is used to open the popup window <script type="text/javascript"> var popup; ...

c#javascripthtmlasp.net

Is it possible to create an HTML select that displays transparent text after a selection

I'm currently working on customizing the appearance of an HTML select element with various background color options. Everything is functioning properly, but I have a specific requirement. I want the text in the dropdown options to be visible only when ...

jqueryhtmlcolorshtml-select

Utilize PHP to read a text file and merge identical entries to declutter the

I am testing a code snippet that redirects users to a different page if their IP address does not match the predefined one. If it doesn't match, I also want to save their IP in a text file. $file = fopen("ips.txt", "w"); if ($ip == "iphere") { e ...

phphtmlarraysfopenfwrite

Tips for repositioning the color picker

Here's a straightforward example where I'm looking to adjust the location of the color picker so that it aligns with the button. function changeColor() { document.getElementById('test').click(); } <div> <h1> Colo ...

javascripthtmlangular