Empty gap separating two side by side photos

Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and setting the font-size to 0, but so far, nothing has been successful in reducing the space. Additionally, I would like both images to be centered once adjusted. It's possible that I may have incorrectly applied these modifications to various classes or divs throughout the process, but I'm unsure where exactly I went wrong.

I've included the HTML and CSS files, along with a screenshot demonstrating how it appears on my local server. I hope these attachments prove helpful. Thank you for any assistance you can provide.

https://i.stack.imgur.com/Ei366.png

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block; 
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
 <div class="row">
        <div class="campus-col">
            <img src="#">
            <div class="layer">
                <a href="#"><h3>TEXT</h3></a>
            </div>
        </div>
       
        <div class="campus-col">
            <img src="#">
            <div class="layer">
                <a href="#"><h3>MESSENGER</h3></a>
            </div>
        </div>
        
    </div>

htmlcss

Answer №1

Do you want it styled like this?

If yes, simply apply display: flex and align-items: flex-start

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}


.row {
  display: flex;
  align-items: flex-start
}

.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block; 
}
.layer{
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    text-align: center;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
<div class="row">
        <div class="campus-col">
            <img src="https://via.placeholder.com/150">
            <div class="layer">
                <a href="#"><h3>TEXT</h3></a>
            </div>
        </div>
       
        <div class="campus-col">
            <img src="https://via.placeholder.com/150">
            <div class="layer">
                <a href="#"><h3>MESSENGER</h3></a>
            </div>
        </div>
        
    </div>

Answer №2

Here is a CSS snippet to create a row flex container with centered content and space between images:

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block; 
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
<div class="row">
        <div class="campus-col">
            <img src="https://picsum.photos/200">
            <div class="layer">
                <a href="#"><h3>TEXT</h3></a>
            </div>
        </div>
       
        <div class="campus-col">
            <img src="https://picsum.photos/200">
            <div class="layer">
                <a href="#"><h3>MESSENGER</h3></a>
            </div>
        </div>
        
    </div>

Answer №3

To adjust the width of elements, consider using the bootstrap class .campus-col or defining a custom width.

Answer №4

You can use (justify-content: center) to align the elements in the flexbox, specifically, you can center the .img within the .row.

Another option is to use (justify-content: space-between) and define the width of the parent element (.row), which will align each .img to the edge according to their position (left or right).

For more detailed information, refer to: A Complete Guide to Flexbox

The Code:

.row {
  display: flex;
  justify-content: center;
}

.img {
  width: 200px;
  height: 300px;
  border: 1px solid;
  border-radius: 6px;
}

.img {
  margin: 0 20px;
}
<div class="row">
  <div class="img img1"></div>
  <div class="img img2"></div>
</div>

Solution based on your code:

Edited:

.row {
  display: flex;
  justify-content: center;
}

.campus-col{
    height: 200px; /* delete later, added to see the changes */
    border: 1px solid #ddd; /* delete later, added to see the changes */
    margin: 0 10px; /* add/remove spaces (left right of each one) */
}

The Code:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.row {
  display: flex;
  justify-content: center;
}

.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 200px;
    border: 1px solid #ddd;
    margin: 0 10px;
}

.campus-col img{
    width: 100%;
    display: block; 
}

.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.layer:hover{
    background: rgba(226,0,0,0.7);
}

.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}

.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}
<div class="row">
    <div class="campus-col">
        <img src="#">
        <div class="layer">
            <a href="#"><h3>TEXT</h3></a>
        </div>
    </div>

    <div class="campus-col">
        <img src="#">
        <div class="layer">
            <a href="#"><h3>MESSENGER</h3></a>
        </div>
    </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

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Retrieving the ID from the element that was clicked

Here is a code snippet that allows for the changing of color and text when an href link is clicked. /* Function to change the color of the button upon click */ function changeColor(element) { alert(element.target.id); if (element.innerHTML == "Selec ...

javascriptphphtml

Why do the back button and custom scroller behave differently on two different webpages?

I’ve added the malihu custom scroller to my website, but it’s behaving differently compared to how it works in the demo. I can’t seem to figure out what's causing this discrepancy. For reference: Demo: check here Website: visit here The fo ...

htmljquery-pluginsback-buttonscroller

what is the process for creating a dynamic display slide in bxslider?

I am trying to create a flexible length display using bxSlider. Here is the code I have so far. JS var duration = $('ul > li > img').data("bekleme"); $(document).ready(function () { $('.bxslider').bxSlider({ ...

javascripthtmlvariablessliderbxslider

As the value steadily grows, it continues to rise without interruption

Even though I thought it was a simple issue, I am still struggling to solve it. What I need is for the output value to increment continuously when I click the button. Here is the code snippet I have been working on: $('.submit').on('click&a ...

phpjavascripthtml

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

I need a solution where an input field's height adjusts to display the user's entry, then returns to normal size when they click away. It should function similar to this example image: https://i.stack.imgur.com/yKcik.png Once the user enters th ...

htmlcssangularless

Saving the index.html file to disk when the button is clicked

Is there a way to export the current HTML page to a file? I have attempted to achieve this using the following code, but it only works when the page is loaded and not with a button click. <?php // Start buffering // ob_start(); ?> <?php file_pu ...

javascriptphphtmljqueryajax

Tips for creating a dynamic sidebar animation

I have recently delved into the world of web design and am eager to incorporate a sidebar into my project. While browsing through w3school, I came across a design that caught my eye, but I found myself struggling to grasp certain concepts like the 'a& ...

javascripthtmljquerycsssidebar

Learn the process of importing data into an HTML list using Flask

Looking to transfer data from a Python variable to an HTML list? Here's a snippet of HTML code that you can test out: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Panel</title> & ...

pythonhtmlflasktelegram

Comparison between UI Router and ngRoute for building single page applications

Embarking on a new Angular project, a single page app with anticipated complex views such as dialogs, wizards, popups, and loaders. The specific requirements are yet to be clarified. Should I embrace ui.router from the start? Or begin with ngRoute and tra ...

javascriptjqueryangularjshtmlsingle-page-application

Using ASP.NET MVC to generate dynamic CSS styles

I am seeking a solution that will allow me to achieve the following objectives: Retrieve dynamically generated CSS from an action method Select a CSS file based on request parameters or cookies Utilize a tool for combining and compressing (minifying) CS ...

c#.netasp.net-mvccss

Recreating a <select> element and verifying it once more using JS/HTML5

Before I delve into my issue, I would like to offer an apology for any errors in my English. So, the HTML code I am working with looks like this: <body> <div id="container"> <div id="taskList"> <div id="firstTask"> & ...

javascriptangularjshtmldrop-down-menu

Is there a way to adjust paragraph sizes in CSS flexbox so they scale with the font size?

After spending hours trying to figure this out on my own, I finally caved and registered on StackOverflow. Despite Google providing plenty of related questions and examples, I still can't find a solution to my specific problem. The issue at hand is c ...

htmlcssflexbox

Tips for modifying the color of selected text

Is there a way to change the color of the dropdown text? Currently, it is set to red but initially appears as black. When clicked on, it changes to red. How can I make it so that the color is initially displayed as red? <select> <option style ...

htmlcss

Align the present domain using XPath

Is there a way, possibly with a newer version of XPath, to make the following code work: //a/@href[not contains("DOMAIN OF THE CURRENT PAGE")] The DOMAIN OF THE CURRENT PAGE should function as a variable that retrieves the domain - similar to something l ...

htmlxmlxpathweb-scraping

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

htmlcss

Sas: The outcome matches the viewer results exactly

I am reaching out because I am experiencing an issue with my results viewer in Sas 9.4. When the results load, they appear similar to the output format. Instead of displaying a table with cells, it appears as a table drawn with -+|. The layout options do ...

htmlsastabulate

What is the best way to fetch images from a JSON object in a React application?

I have been trying to load images from an array of objects in React, but I keep encountering a "module not found" error. This issue has been frustrating me for the past couple of days. Can someone please help me troubleshoot this problem or provide some su ...

javascripthtmljsonajaxreactjs

Utilize JQuery to Extract HTML Elements

I'm working on developing a Chrome extension and one of my tasks is to extract specific text from the webpage I am currently visiting and store it in a variable. I have been attempting to achieve this using jQuery, however, none of the solutions I&apo ...

javascriptjqueryhtml