gallery showcasing pictures with a prominent main image and accompanying smaller images

I am struggling to display my image gallery the way I envision it. I would like to have a larger main image with the rest of the images displayed on the right side below it. The current code I have is:

<div class="gallery">
<a href="images/1.jpg">
<img class="card-img-top" src="images/1.jpg" alt="Main image" style="width: 50%;">

<div class="image-container">
<img src="images/1.jpg" alt="Image from advertisement">
<img src="images/motor.jpg" alt="Image from advertisement">
<img src="images/motor2.jpg" alt="Image from advertisement">
<img src="images/2.jpg" alt="Image from advertisement">
</div>
</a>

<a href="images/motor.jpg"></a>
<a href="images/motor2.jpg"></a>
<a href="images/2.jpg"></a>
<a href="images/1.jpg"></a>
</div>

.image-container {
    display: flex;
    overflow-x: auto;
}

.image-container img {
    max-width: 20vh;
}

Currently, this is how it looks: https://i.sstatic.net/YJ74x.png

But, this is the desired look: https://i.sstatic.net/VuSo7.png

htmlcss

Answer №1

.gallery {width: 100%;}
.gallery a {
display: flex;
}
.gallery img{width: 80%; height: auto;}
.image-container {
display: flex;
flex-direction: column;
margin-left: 11px;
width: 20%;
height: 300px;
overflow: scroll;
}

.image-container img {
margin: 11px 0 0;}
.image-container img:first-child {
margin: 0 0 0;}
<div class="gallery">
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg">
<img class="card-img-top" src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Main Image">

<div class="image-container">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="An image related to the ad">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="An image related to the ad">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="An image related to the ad">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="An image related to the ad">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="An image related to the ad">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="An image related to the ad">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="An image related to the ad">
</div>
</a>

<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
</div>

I utilized flex css for your design implementation.

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

How can I make a dropdown menu appear when I select a checkbox?

Is it possible to have a dropdown menu with changing options appear when I click on a checkbox using HTML and JavaScript? I have experimented with some code snippets in JavaScript as a beginner, but I am unsure if they are needed here. Is there an altern ...

javascriptphphtml

Is tabIndex being used as a css property?

I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...

htmlcssdompropertiestabindex

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: https://i.sstatic.net/nUq1d.png One issue I am facing is that the grid header gets hidd ...

htmlcssangulardialogprimeng

What is the best method for retrieving text that does not contain tags (such as text

My challenge involves storing headings and paragraphs into separate arrays, but I am struggling with handling text between <br>. Below is my HTML code and Python snippet: <p><strong>W Ognisku</strong><br>W londyńskim Ognisku ...

pythonhtmlweb-scrapingbeautifulsouppython-docx

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...

jqueryhtmlajaxforms

If the value of the input matches, set the checkbox to be

I have successfully implemented functionality that allows the value of an input to be changed by clicking a checkbox. This works without any issues. Now, I am facing the challenge of automatically checking the checkbox when the page loads, but only if the ...

javascriptjqueryhtmlcheckbox

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...

javascripthtmlcss

Turn off the ability to view the content of .css and .js files within the browser

Earlier, I inquired about how to disable file and folder listing and discovered that it can be achieved using a file named .htaccess. To disable folder listing, I entered Options -Indexes in the .htaccess file located in the parent folder. Additionally, to ...

javascriptcss.htaccess

The drop-down menu does not maintain its selected option after the window is refreshed

I am struggling with a dropdown list as shown below: <select class="span2" id ="sort" name= "order_by"> <option >Default</option> <option >Price</option> <option >Color</option> ...

javascriptjqueryruby-on-railshtml

Having trouble with the rendering of the Stripe Element Quickstart example

Currently, I am diving into the world of Stripe's Element Quickstart. Take a look at this fiddle that I have been working on. It seems to be quite different from the example provided. Although I have included the file, I can't seem to figure out ...

javascripthtmlcssstripe-payments

Tips for deleting directory path from a file name

Similar Question: How to extract file name from full path using PHP? echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImag ...

phphtml

Utilize Bootstrap to combine two tables within a single column efficiently

I am facing an issue with my layout that involves organizing 3 tables in a specific way. Two smaller tables are supposed to take up 3 bootstrap columns on the left side, while one larger table should occupy 9 columns on the right side. However, when I impl ...

htmlcssbootstrap-4

There seems to be an issue with XAMPP as I am unable to start my server due to an

A problem has occurred: Apache shut down unexpectedly. 11:58:07 [Apache] This could be caused by a blocked port, missing dependencies, 11:58:07 [Apache] insufficient privileges, a system crash, or another shutdown method. 11:58:07 [Apache] Click on ...

phphtmlmysqlxampp

Having issues extracting information from easports.com due to difficulties with the <ea-elements-loader> element

Recently, I've been developing a Python WebScraper to extract data (such as wins and losses) from our FIFA ProClub by crawling various websites. While I successfully implemented it on a third-party website using BeautifulSoup and requests, I encounter ...

javascriptpythonhtmlseleniumweb-scraping

Issue with Vue.js - Double curly braces not rendering data on the page

I've recently delved into the world of vue.js Strangely enough, the double curly braces syntax doesn't seem to be rendering for me. However, when I utilize the v-text directive, everything falls into place. Here's a snippet of my code: HTM ...

javascripthtmlvue.js

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

Currently, I am attempting to automate the completion of a multi-page form using JavaScript. Below is the script that I am utilizing: // Page 1 document.getElementById("NextButton").click(); // Page 2 completion(document.getElementById("Rec ...

javascripthtml

The hover effect in CSS animations is turned up too high

Check out my Reddit news feed design: https://codepen.io/Teeke/pen/YxXXaE When hovering over articles, the headlines get displayed. But if the article text is too long, part of the headline may go off-screen. Instead of changing the line-height, I' ...

csssass

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

I am struggling with sending multiple selected checkboxes from HTML to Java using jQuery/Ajax. The issue is that when I check the result in Java, instead of getting the values I selected (e.g., National, State), I get "activityRangeCBs[]". Here is the HTM ...

javajqueryhtmlajax

Issues with the CSS code causing the dropdown menu to malfunction

Having trouble getting my CSS to apply when creating a drop-down menu. I've set up UL and LI elements for the dropdown, but the styling is not rendering as expected. Check out the screenshot below for a look at how it currently appears using developer ...

htmlcssasp.net-mvc-5