Techniques and Strategies for showcasing several images in close proximity

I am looking to arrange dummy images in a row next to each other, similar to the example shown here:

https://i.sstatic.net/HUUGz.png

Since my CSS skills are not very strong, I am seeking guidance on the proper way to achieve this. The images I have are all static and do not need any dynamic or sliding effects - just simple responsive display and scaling.

Thank you for your suggestions.

I have experimented with using position absolute and relative, but encountered difficulties with weird positioning across the layout. My project utilizes Bootstrap 4.

cssbootstrap-4frontend

Answer №1

Give this a shot:

body {
  background: #20262E;
}

div {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

img {
  width: 24%;
  border-radius: 50%;
}
<div>
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
</div>

To get the green tick with image, use the following code:

body {
  background: #20262E;
}

#image-gallery {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

.image-box{
  display: inline-block;
  position: relative;
  width: 24%;
}

img {
  width: 100%;
  border-radius: 50%;
}

.green-tick {
  position: absolute;
  bottom: 10%;
  right: 10%;
  border-radius: 50%;
  color: #ffffff;
  background: #00ff00;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />

<div id="image-gallery">
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
    <i class="fa fa-check green-tick"></i>
  </div>
</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

Rotation using CSS in Internet Explorer 8

Can anyone help me with a CSS solution for rotating elements in IE8? I've tried some solutions that claim to work in IE8, but they're not working for me. What am I doing wrong? Here's what I've attempted: <!DOCTYPE html> <htm ...

htmlcssinternet-explorer-8rotation

Avoid having a pre tag enclosed long line exceed its container's width

Within the <pre> </pre> tags, I have a lengthy single line of text that needs formatting. Is there a method to automatically wrap the text or must I manually insert <br> tags within the text? ...

htmlcss

What is the term for the visual display of a product through a photo gallery or slideshow?

Can someone help me identify what the item I'm looking for? You can click on the link to see an example of the product: sephora product example What is the technical term for the section that contains product pictures and slides? Are there any librar ...

jqueryhtmlcssbootstrap-4

col-md-8 displayed on a separate line

Having some trouble with the alignment of col-md-4 and col-md-8 elements on the same line. The col-md-8 is appearing below the col-md-4 despite my attempts to remove the form-control class. <div class="container"> <div class="col-md-4 co ...

twitter-bootstrapbootstrap-4

defiant underscore refusing to function

I'm currently working on a text editor, but I'm facing an issue with the remove underline functionality that doesn't seem to be working as expected. For reference, you can check out a working code example here: jsfiddle Below is the part of ...

javascripthtmlcssunderline

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

Unable to successfully cancel requestAnimationRequest in a React component when using hooks

I'm currently working on a progress bar project where I aim to halt the animation (using cancelAnimationRequest) once it reaches a specific value (10, 100, ... N) and reset it back to 0. Unfortunately, in my existing code, although it resets to 0, th ...

javascriptreactjsfrontendreact-hooksrequestanimationframe

Applying styled text to a Node.js chat application

I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...

javascriptjqueryhtmlcssnode.js

What is the process for adding color to the rows of a table?

Hello, I have a table with various fields that include: I am looking to assign colors to entire rows in the table based on certain criteria. For example, if the ASR value falls between 75 and 100, it should be assigned one color; for values between 50 and ...

phpcss

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

javascriptcsshtml

The altered variable refuses to show up

Currently, I am working on a project to create a Skate Dice program that will select random numbers and display the results simultaneously. Unfortunately, I have encountered an issue where the randomly generated number is not being shown; instead, it dis ...

javascripthtmlcss

The width of the Bootstrap shadow container is not optimized for large viewports

Having recently started using bootstrap (less than six hours of documentation/development time), I encountered an issue where the width of my shadow container extends too far on smaller screen sizes. Any screen size above 991px leaves unwanted white space ...

htmlcssbootstrap-5

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...

htmlcss

javascript various backgrounds on click

I have implemented a list to allow users to select their top 3 choices, and I am using JavaScript to track these selections and change the background color accordingly. 1st selection -> Green background 2nd selection -> Yellow background 3rd sel ...

javascriptcss

Ways to ensure that an svg image is perfectly sized to its parent container

I'm exploring the svg <image> tag for the first time. I've decided to use this tag to apply a gray filter on an image (thanks, IE). Check out my HTML code below: <div class="container"> <div class="item"> <svg version ...

htmlcsssvg

What is the best way to adjust the height of a container to equal the viewport height minus a 300px height slider?

Forgive me for the rookie question, I know what I want to achieve should be simple but I seem to be having trouble articulating it in my search for solutions. Essentially, I am trying to set a section in HTML to the height of the viewport minus the height ...

javascriptjqueryhtmlcss

What is the best way to set up a clickable image without making the entire div clickable?

Is it possible to make just a specific image clickable within a div without making the entire div clickable? I have an image inside an anchor tag and a surrounding div that is clickable. The issue is that the entire space around the first image, .home, is ...

htmlcssimagehyperlink

:before pseudo-element causing interference with child elements

Struggling to understand how an absolutely positioned :before element works. I need a large quote mark to be placed behind a testimonial. I opted for a :before element because it is a font, making it scalable for retina displays and saving an extra HTTP re ...

htmlcsspositionz-indexpseudo-element

The iframe is not large enough to contain all the HTML content

I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document ...

javascriptcssangularhtml

Hover over the Div element for inline effect

Hello all, I am currently working on running a while loop from a database to show different records. The twist is that these records are displayed as images, which makes it tricky to customize using standard CSS. To work around this, I'm implementing ...

phphtmlcss