Mosaic-inspired image gallery with HTML and CSS styling

Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not required)

I'm still learning about web development, so please bear with me if there are any errors.

I attempted to create something similar using images, but it doesn't seem to be working as expected...

<div class="jumbotron">
<center>
        <!-- FIRST ROW -->
        <div class="row">
            <img src="http://www.example.com/image1.jpg" width="200" height="200" border="0">
            <img src="" width="200" height="200" border="0" class="img-circle">
            <img src="http://www.example.com/image2.jpg" width="200" height="200" border="0">
            <img src="" width="200" height="200" border="0" class="img-circle">
            </div>
             <p></p>
        <!-- SECOND ROW -->
          <div class="row">
            <img src="" width="200" height="200" border="0" class="img-circle">
            <img src="http://www.example.com/image3.jpg" width="200" height="200" border="0">
            <img src="" width="200" height="200" border="0" class="img-circle">
            <img src="http://www.example.com/image4.jpg" width="200" height="200" border="0">
            <p></p>
          </div>
</center>

This is the concept I have in mind

https://i.stack.imgur.com/zxJSs.jpg

htmlcssblocktilemosaic

Answer №1

If you're looking to begin with creating a grid or table-like structure, there are several ways to achieve this. Some common methods include using UL LI for simplicity, flexbox, and more.

Here is an example of a UL LI structure:

<div id="container">
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
 </ul>
</div>

For the SCSS style on JSFiddle, check out: https://jsfiddle.net/itsselvam/sgmtu6cr/

Hopefully, this provides a good starting point for you!

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

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

Are desktop values taking precedence over the mobile media query?

Currently, I am facing an issue with aligning icons (images) under each title on a page that lists various classes. The icon needs to be centered below the title on both desktop and mobile versions of the site. However, I have encountered a problem where u ...

htmlcssimagealignmentcenter

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

javascripthtmlcssanimationcss-animations

How can I use HTML to replace specific text or blocks within the DraftJS Editor?

Incorporating Rich Text capabilities into my React-based web application using DraftJS Editor has been a focus of mine. One specific requirement I have is the ability for a user to trigger a drop-down menu by typing the "#" key next to the editor. From th ...

htmlreactjsreplacedraftjs

Activate the capture property for the file selection based on the label that is selected

This is a form that consists of two labels: <form method="POST" action='/process' enctype="multipart/form-data"> <div> <label for="file" class="upload-button"><i class=" ...

javascripthtmlcssinput

Anomaly with Responsive Images in Internet Explorer 7

Something unusual has come up. In the process of developing a WordPress theme, I needed it to be completely responsive. I decided to create a "gallery" consisting of rows with 3 thumbnails each, which would open in a lightbox when clicked. To achieve this ...

htmlcssimageresponsive-design

Ways to turn off .removeClass()

Encountering an issue with jquery-2.1.4.js. Upon integrating a layerslider into my website, the script modified div classes. Attempted using older versions of the script without success. Currently have classes as follows: <a href="#" class="col-md-3 ...

jqueryhtmlcssremoveclass

What causes the menu icon to shift to the left upon clicking it?

I'm currently working on a website project that involves implementing a fixed navbar with jQuery sliding animation for the menu. However, I've encountered an issue where the "menu_icon" is getting pushed to the left every time the menu slides dow ...

javascriptjqueryhtmlcss

Exploring the Relationship Between Z-Index and Overflow in a Collapsible Div Featuring Slim Select

Here is my demonstration of embedding a Slim Select dropdown within a collapsible div: CodePen Example <html> <head> <!-- MULTIPLE SELECT DROPDOWNS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ ...

htmlcssoverflowz-index

Display content in two columns. If the width of the left column is too narrow, move the content in the right column

In my layout, there is a wrapper div with two child elements: left div and right div. The left div contains text which can be lengthy, while the right div holds an image loaded asynchronously without known width: <div id="wrapper"> <div id="l ...

htmlcss

Creating checkboxes in an HTML table based on the output of a query

I'm currently working on creating a dynamic table that displays query results, and I have come across this code snippet that successfully generates the table. However, I would like to add an extra column to each row that contains checkboxes. Is there ...

phphtmlmysqlcheckboxhtml-table

I'm still unclear on the necessity of using clear:both

Presenting a simplified example of my previous query, I am still seeking clarification regarding the necessity of using clear:both to enable padding-top. Can someone provide a straightforward illustration to elucidate the usage of float and clear? Hence, ...

htmlcss

Elevate a division within its container

Is there a way to make a smaller div positioned at the top when it's placed next to a larger one in the same container? I'm looking for a solution that doesn't involve using position-relative and manually adjusting the placement. Take a loo ...

htmlcss

Import a new JavaScript file and access a variable

I'm currently working on a school project where I am creating an online platform for purchasing games. The platform is designed using HTML, CSS, and JS, with each game having its own corresponding JS file containing the information. Here is a sample o ...

javascripthtml

Adjusting the text color for select values within a <td> element

I have a table that is populated with data retrieved from an API. Each cell in the table contains multiple pieces of data. Below is the code used to create the table: <td class="myclass"> <?php $myvar = explode(" ", $json["data"]); ...

javascriptphpjqueryhtmlcss

Issue with Nivo Lightbox: image not properly centered or resizing correctly

Whenever an image is clicked, it opens in the Nivo lightbox. This feature used to work flawlessly, but recently, it seems to be experiencing issues. The image should be centered and resize responsively to stay in the center. (For example, it worked correct ...

cssresponsive-designlightboxnivo-slider

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

Tips for utilizing string interpolation in the style tag of an Angular component

@Component({ selector: 'app-style', template: ` <style> .test { color: {{ textColor }} } </style> ` }) export class StyleComponent { textColor = "red"; } The current method doesn't appear to b ...

cssstringangularstylesinterpolation

Using the power of Javascript's jQuery library: the fantastic ".on()" Event Handler

I'm encountering an issue with the Jquery Event Handler ".on()". On my home page, I have a Favorite button on each post. If the post has not been favorited: li appears inactive Event 1 is triggered If the post has been favorited: li appears act ...

javascriptjqueryhtml

The alignment issue persists when attempting to set 'relative' on the parent and 'absolute' on the inner element in a Bootstrap column for bottom alignment

Here is a snippet of my basic HTML code: <div class = "row"> <div class = "col-xs-8"> <p>long long long long text that generates a taller column</p> </div> <div class = "col-xs-4"> <p> ...

javascriptjqueryhtmlcsstwitter-bootstrap