What is the best way to ensure that the red overlay only covers the image without bleeding over to the right side as shown in the image?

As shown in the image, the red spill on the right side extends beyond the image

Below is the HTML code I am using

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZ University</title>
    <!--Bootstrap CSS-->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <!--Custom Css-->
     <link rel="stylesheet" href="hzuni.css">

     <!--Fonts-->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,100;1,200;1,400;1,600;1,700&display=swap" rel="stylesheet">

</head>

<body>
    <!--Navigation + Logo + Background-->
    <section class="header">
        <div class="navContainer">
    <nav>
        <a href="hzuni.html"><img src="imgs/logo.png"></a>
        <img id="menuIcon" class="menuIcon img-fluid" src="imgs/menu.png" onclick="showMenu()" >
        <div class="nav-links" id="nav-links">
            <ul>
                <i class="fa fa-times" onclick="hideMenu()"></i>
                <li><a href="hzuni.html">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">COURSE</a></li>
                <li><a href="">BLOG</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
        </div>
        
    </nav>
    
    <div class="headerText">
        <h2>Voted The World's Biggest And Best University</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis aliquam harum facere optio iure magni tenetur explicabo ratione<br> sed eligendi temporibus quidem dignissimos placeat deleniti ab, perspiciatis consequatur nisi animi.</p>
        <button class="btn btn-primary">Visit Us To Learn More</button>
    </div>
    </section>
    <!--End of Nav-->

    <section class="course">
        <h1>Courses We Offer</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        
        <div class="container-fluid justify-content-lg-between">
            <div class="row">
                <div class=" col-md-5 col-lg-3 col-sm-12 columns ">
                    <h2>Intermediate</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore incidunt saepe corporis recusandae cupiditate possimus eum a velit pariatur minima reiciendis, esse aliquid qui, assumenda nisi ipsam rerum eligendi delectus?
                    Ea officiis suscipit earum numquam expedita atque at magnam veniam. Quos doloribus asperiores nostrum tenetur, hic nisi accusantium fuga commodi consequuntur exercitationem non nulla maxime laudantium at laboriosam quae officiis?</p>
                </div>

                <div class="col-4 col-md-5 col-lg-3 col-sm-12 columns">
                    <h2>Degree</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore incidunt saepe corporis recusandae cupiditate possimus eum a velit pariatur minima reiciendis, esse aliquid qui, assumenda nisi ipsam rerum eligendi delectus?
                    Ea officiis suscipit earum numquam expedita atque at magnam veniam. Quos doloribus asperiores nostrum tenetur, hic nisi accusantium fuga commodi consequuntur exercitationem non nulla maxime laudantium at laboriosam quae officiis?</p>
                </div>

                <div class="col-4 col-md-12 col-lg-3 mt-md-5 mt-lg-0 col-sm-12 columns">
                    <h2>Post-Graduate</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore incidunt saepe corporis recusandae cupiditate possimus eum a velit pariatur minima reiciendis, esse aliquid qui, assumenda nisi ipsam rerum eligendi delectus?
                    Ea officiis suscipit earum numquam expedita atque at magnam veniam. Quos doloribus asperiores nostrum tenetur, hic nisi accusantium fuga commodi consequuntur exercitationem non nulla maxime laudantium at laboriosam quae officiis?</p>
                </div>

            </div>
        </div>   
    </section>

    <!--CAMPUS-->
    <section class="campus">
        <h1>Our Global Campus</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

        <div class="container-fluid">
          <div class="row mt-5">
              <div class="col-5 img1">
                  <img src="imgs/CampusA.jpg" class="img-fluid  max-width: 100% " id="campusA">
                  <div class="layer">
                      <h3>BOSTON</h3>
                  </div>
              </div>

              <div class="col-5 img2">
                <img src="imgs/CampusC.jpg" class="img-fluid" id="campusC">
                <div class="layer">
                    <h3>BOSTON</h3>
                </div>
            </div>
          </div>  
        </div>

    </section>

    <!--JavaScript Custom-->
    <!--Toogle Menu-->
    <script>
        function showMenu(){
            document.getElementById("nav-links").style.display = "inline-block"}
    </script>
    <script>
        function hideMenu(){
            document.getElementById("nav-links").style.display = "none"}
    </script>
</body>

</html>

This is the CSS for the Campus Section

.campus{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

#campusA{
    height: 300px;
    border-radius: 2%;
    position: relative;
}

#campusC{
    height: 300px;
    border-radius: 2%;
}

.layer{
    background: rgba(226, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    border-radius: 2%;
}


.img1{
    flex-basis: 32%;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.img1 img{
    width: 100%;
}

.img2{
    flex-basis: 32%;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;  
}

.img2 img{
    width: 100%;
}

I have attempted various solutions but can't seem to resolve the issue. Changing the width of .layer affects responsiveness. Any ideas on how to fix this problem?

htmlcssbootstrap-4

Answer №1

One way to adjust padding is by utilizing the p-0 class.

To align your boxes, you can also employ classes like justify-content-X, as demonstrated with justify-content-around in the example below.

function hideMenu() {
  document.getElementById("nav-links").style.display = "none"
}

function showMenu() {
  document.getElementById("nav-links").style.display = "inline-block"
}
.campus {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
}

#campusA {
  height: 300px;
  border-radius: 2%;
  position: relative;
}

#campusC {
  height: 300px;
  border-radius: 2%;
}

.layer {
  background: rgba(226, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  border-radius: 2%;
}

.img1 {
  flex-basis: 32%;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.img1 img {
  width: 100%;
}

.img2 {
  flex-basis: 32%;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.img2 img {
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HZ University</title><!Bootstrap CSS--><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><!Custom Css--><link rel="stylesheet" href="hzuni.css"><!Fonts--><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,100;1,200;1,400;1,600;1,700&display=swap" rel="stylesheet"></head><body><!--CAMPUS--><section class="campus"><h1>Our Global Campus<</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><div class="container-fluid"><div class="row mt-5 justify-content-around"><!-- horizontal aligment reset --><div class="col-5 img1 p-0"><!-- padding-reset --><img src="imgs/CampusA.jpg" class="img-fluid max-width: 100%" id="campusA"><div class="layer"><h3>BOSTON</h3></div></div><div class="col-5 img2 ml-5 p-0"><!-- padding-reset --><img src="imgs/CampusC.jpg" class="img-fluid" id="campusC"><div class="layer"><h3>BOSTON</h3></div></div></div></div></section></body></html>

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

Disable the div by graying it out when the button is clicked

In my jsni form, I have implemented a click handler on the save button. When the save button is clicked, I would like the specific div to be greyed out to indicate that data is being saved. var x=$doc.createElement("div"); x.id="nn"; var lbl=$doc.createEl ...

javascriptcss

maximum height within a flexbox container

In my flex container, I have set the flex direction to columns and placed 3 divs inside it. The first and third div adjust their height based on content, while the second div (referred to as A) should occupy the remaining space with an unknown height. Wit ...

htmlcssflexbox

Incorporate a tooltip into a horizontal bar chart created using D3

Having trouble adding a tooltip popup to display the year and value when hovering over the bar. Tried multiple options without success. Any suggestions? Experimented with a similar approach as shown in this link but still facing issues, especially with th ...

javascripthtmld3.jspopuptooltip

Ways to showcase documents from a directory in Django

Recently, I developed a Django application that includes a folder containing images. A new requirement has arisen where users need the ability to select an image from a dropdown menu. They will be prompted to provide the path to the folder, and the selec ...

htmldjangofilefile-upload

Exploring the submission of forms in Angular

Currently, I am evaluating an Angular application and focusing on this specific HTML input: <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm"> <input type="text" name="nombre" id="field_nombre" ...

javascripthtmlangularformsproperties

Is there a way to replace a CSS class applied within an iframe?

I have a third-party iframe widget component embedded in my page. The only HTML string present in the body of my page is this iframe, which includes a custom button styled by the widget.jsp. In Chrome's inspector, I can only see the <iframe> com ...

htmlcssiframe

Access the designated hyperlink within the table row

Currently experimenting with Selenium Webdriver in Firefox and also looking to test in IE8. Below is the structure of my HTML: <table id="table"> <tbody> <tr> <td>Text1</td> <td><a id="assign" hr ...

cssseleniumxpathselector

Attempting to showcase the text within an <a> element on a <canvas> element while ensuring there are no noticeable visual distinctions

Imagine having this snippet of code on a webpage: elit ac <a href="http://www.ducksanddos/bh.php" id='link'>Hello world!</a> nunc Now, picture wanting to replace the <a> tag with a <canvas> element that displays the same ...

javascriptcsshtmlcanvas

Resolving VSCode WebViewPanel access issues through a corporate proxy

I am currently utilizing the "C4 DSL Extension" in VSCode to display previews of my architecture diagrams. These previews are generated through the WebviewPanel functionality. If you're interested, you can access the source code here: While everythin ...

htmlvisual-studio-codenetworkinghttp-proxy

Encountering some difficulties while setting up my development tool (specifically webpack)

I have embarked on a journey to learn modern JavaScript with the help of Webpack and Babel. As a beginner in this field, my instructor is guiding me through the principles of modern JavaScript by building an app called Forkify - a recipe application. While ...

javascripthtmlnode.jsnpmwebpack

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

javascripthtmldomecmascript-6html-table

Tips for using multiple ng-models in a single input field

Can multiple ng-models be used on a single input field? For example: <input ng-model="formData.glCode" ng-model="accNumber" ng-change="accNumber = editAccountNumber(accNumber)"/> I need to apply this to inputs that already have ng-model set, and I ...

angularjshtmlcheckbox

Having trouble adjusting the font color and font style of the text in a hamburger menu

I'm currently working on customizing the text displayed on my hamburger menu. Below are the codes I've tried to adjust the text and font-family of the hamburger menu, but it seems like these changes only affect the color of the icon, not the actu ...

htmlcssmaterialize

Add a plethora of images to the canvas

Just starting out with Fabric.js and trying to figure out how to draw a picture on the canvas after a drop event. I managed to do it once, but am struggling with inserting more pictures onto the canvas (each new drop event replaces the previous picture). ...

javascripthtmlcanvasfabricjs

Angular 4 animation for smooth sliding down

Attempting to add animation to my webpage has presented a challenge: I have a content div on my page, along with a button that triggers the opening of another div above the content. My goal is to have this top div fade and slide into view while simultan ...

cssangularangular-animations

Running a Python script from an external source on a webpage through the utilization of PHP

Being new to this field with a background in Biology, I am currently focused on working with biological databases. I have successfully created a database using MySQL, HTML, PHP, and Bootstrap. However, I now aim to integrate an analysis module that include ...

javascriptpythonphphtml

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

htmlfacebookflashfacebook-opengraphgrooveshark

Looking for a streamlined method to submit my multiple checkbox selections to the database in a more efficient manner

I am looking for a more streamlined method to submit my multi-selected checkbox form data to my database. Specifically, I am interested in consolidating the values from the Vase Holes Value Checkbox into a single row within my database table instead of h ...

phphtmlmysqlpostbootstrap-4

Creating HTML forms allows for images to be used as checkboxes

I'm attempting to convert an HTML forms checkbox into a clickable image that changes its appearance when clicked. Additionally, I need it to be capable of storing one or two variables (specifically for generating them with row and column values) and f ...

htmlcssformscheckbox

Auto-closing dropdown menus in the navbar of a Shiny app with Bootstrap

Is there a way to customize the behavior of a shiny navbarMenu so that when I click inside or outside it, the dropdown does not automatically hide? I have seen mentions of using data-bs-auto-close="false" in the Bootstrap documentation, has anyon ...

htmlcssrshinybootstrap-5