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

Is there a way to display a delivery estimate underneath the product title on a WooCommerce website?

How can I display Estimated delivery days below the product title to inform my customers about their order's arrival date, similar to the example on the page included in the link? I would like it to show varying days depending on the shipping class. ...

phpcsswordpresswoocommerceproduct

Using CSS within the HTML code is effective, however, linking to an external CSS file is not working

I require assistance. This situation is absolutely absurd. Currently, I am utilizing Komodo IDE version 7.1.2 and Firefox version 15.0.1. The HTML5 file that I created looks like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

csshtmlfirefoxstylesheet

Using jQuery to iterate through an array and reverse its order

Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...

javascriptjquerycss

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Looking to update the HTML view using *ngIf, depending on a local variable that should change based on an observable variable from a shared service. HTML <div class="login-container" *ngIf="!isAuthenticated"> TypeScript code for the same componen ...

htmlangulartypescriptobservable

Elements within the div are overlapping each other

Despite adding margin, my h3 tag and p tag in a div keep overlapping. .title { margin: 0 0 26px; width: 335px; height: 28px; font-size: 24px; font-stretch: normal; font-style: normal; line-height: 36px; letter-spacing: 0; text-align: c ...

htmlcss

Positioning html images to overlap each other without losing the ability to click

Currently, I am facing a challenge with positioning two images over each other. The back image should be at the bottom, while the center image needs to be on top of it. Additionally, there is a requirement for placing a random link (in this case google.com ...

javascripthtmlcsspositioncss-position

Designing a Bootstrap layout with twin divs adjacent to each other

I am trying to design a webpage with two Divs positioned side by side using bootstrap styles. However, the code I have been using is not yielding the desired outcome. Is there anyone who can offer me some guidance on how to achieve this? Thank you. < ...

jqueryhtmlcsstwitter-bootstrap

There is excessive white space at the bottom of my Index page after the footer that needs to be removed

Recently began working on converting a PSD to HTML and I've reached a point where everything seems fine. However, I understand that my CSS programming may not be the best at the moment. With your help, I am confident that I can learn and improve gradu ...

htmlfooter

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

javascriptjquerycss

Animating lines with JQuery beneath navigation links

Currently in the process of revamping my portfolio website, and it's still a work in progress. Recently stumbled upon a jquery tutorial that enables a line to animate under anchor elements on hover, which I find quite intriguing. However, I am facing ...

jqueryhtmlcssanchor

Lack of animation on the button

Having trouble with this issue for 48 hours straight. Every time I attempt to click a button in the top bar, there is no animation. The intended behavior is for the width to increase and the left border color to change to green, but that's not what&ap ...

javascripthtmlcsssvelte

Currently focusing on improving the responsiveness of the navigation bar and grid layout

I'm facing a new challenge I can't seem to crack: Despite setting my grid boxes to be responsive with 1fr column and (6, fr) row, they are displaying poorly on mobile devices. Additionally, my navbar remains fullwidth and mobile-like even when i ...

htmlcss

Modify styling of complete list upon clicking in React

For my latest project, I developed a basic todo application using React. One of the key features is that when a user clicks on a checkbox, the corresponding todo item's CSS changes to show a strike-through effect. Additionally, a button appears on hov ...

cssreactjs

Having trouble with your mobile dropdown menu not responding to clicks?

I'm having trouble getting a dropdown menu to work on the mobile version of my website. When I click on the dropdown menu image, it's supposed to appear, but it's not working as expected. JSFiddle: https://jsfiddle.net/xfvjv184/ Included ...

javascriptjqueryhtmlcssdrop-down-menu

What is the best way to halt Keyframe Animation once users have logged in?

To enhance user engagement, I incorporated keyframe animation into my login icon on the website. The main objective is to capture the attention of visitors who are not registered users. However, once a user logs in, I intend for the keyframe animation to c ...

javascriptcsscss-animationskeyframe

Stringified HTML code showcased

When working with Angular, I have encountered an issue where I am calling a function inside an .html file that returns a string containing a table element. My goal is to convert this string into HTML code. I attempted to use [innerHtml]: <p [innerHtml ...

htmlangulartypescript

React component with element style declared in module.css file and conditional state

I'm in the process of developing a mobile dropdown feature for a React web application. I am looking for guidance on the proper syntax to use when incorporating multiple classes into a React element. My goal is to apply styles from an imported module ...

cssreactjsclassnext.jsclassname

How can we efficiently load a JSON file from a local path into an HTML document in a way that is compatible with all browsers?

I am attempting to retrieve JSON data from a local path and display it on a basic HTML page. I have tried various methods such as fetch, ajax in order to load the data and update the corresponding values on the web page. The goal is to host this page so t ...

javascriptjqueryhtmljsonajax

The outcomes of my JavaScript code are not aligning with my expectations

I've been experimenting with printing objects from an API using JSON and AJAX, and I noticed that the console.log works perfectly to display the output. However, I'm having a bit of trouble with my generateCreatureDiv function as it doesn't ...

javascriptjqueryhtml

Pressing the button will allow you to select and copy the text within the

I am looking to incorporate a mock-chat feature into my website. The concept is to type something on the website, then click a button next to it which will move the text to a frame above. I attempted this using a textarea and even found a code for selectin ...

javascripthtmlcsscopy