Exploring the World of Bootstrap 4 Cards

Just starting out in UI/UX, I played around with some gallery transitions featuring hover effects, and incorporated Bootstrap cards into the mix. When I hover over the image (which was blank at first), it now displays an overlay with the intended text, along with the Bootstrap cards. However, despite hours of searching for a solution, I can't seem to make it responsive. Please help!

Here's the HTML code I used:

<div class="gallery mt-5">
    <div class="gallery-image">
      <img src="Images/Body-Section-2-pic-unsplash.jpg" alt="Not Found" width="100%" height="670px"/>
      <div class="gallery-text" >
      <h3 style="line-height: 500px;">PASSION FOR THE GAMES, WITH A NEW PERSPECTIVE.</h3>
    <div class="container">
        <div class="row" style="display: flex;">
            <div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787;">
                <img src="Images/Body-Section-2-pic2-unsplash.jpg" alt="Not Found" class="card-img-top rounded"  height="140px" width="200px" >
                <div class="card-body">
                    <h5 class="card-title mt-2" style="color: #42573f; font-weight: bold;">ONLY KIDZ ZONE</h5>
                    <p class="card-text ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" style="text-decoration: none; color: #57443e; font-weight: bold;">INDOOR GAMES</a>
                    <br>
                    <a href="#" class="" style="text-decoration: none; color: #57443e; font-weight: bold;">OUTDOOR GAMES</a>
               </div>
            </div>
            <div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
                ...
            </div>
            ...
        </div>
   </div>
    </div>   
    </div>  
</div>

This Is The CSS I Used:

.gallery {
width: 100%;
height: auto;
position: relative;
padding: 0;
margin: 0;
text-align: center;}
...

Answer №1

Styling with CSS

.gallery-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    cursor:pointer;
    position: relative; 
    display: block;
}

.gallery-caption{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto; 
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    vertical-align:middle;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-caption:hover{
    opacity: 1;
}

.gallery-caption h3{
    color: white;
    font-size: 40px;
    font-family: sans-serif;
    font-weight: bold;
    display: inline-table;
    vertical-align: middle;
}

.card{
    margin: 5% 0%;
}

.card-details{
    margin: 0% 0% 0% 3%;
    padding: 6% 0%;
}

@media screen and (max-width: 350px) {
    .card {
        width: 100% !important;
    }
}

Structured with HTML

<div class="gallery-section mt-5">
    <div class="gallery-image">
        <img src="Images/Body-Section-2-pic-unsplash.jpg" alt="Not Found" width="100%" height="670px"/>
        <div class="gallery-caption">
            <h3>NATURE'S WONDER IN DETAIL.</h3>       
        </div>   
    </div> 
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787;">
                    <img src="Images/Body-Section-2-pic2-unsplash.jpg" alt="Not Found" class="card-img-top rounded" height="140px" width="200px"/>
                    <div class="card-details">
                        <h5 class="card-title mt-2" style="color: #42573f; font-weight: bold;">VACATION FUN</h5>
                        <p class="card-text">Discover your next getaway destination with us.</p>
                        <a href="#" style="text-decoration: none; color: #57443e; font-weight: bold;">EXPLORE NOW</a>
                    </div>
                </div>
            </div>

            <!-- Additional card sections can be added here -->

        </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

Creating consistent indentation in HTML code can be achieved without the presence of any unnecessary

When I add indentation to my HTML code, it results in extra whitespace between elements on different lines. <div id="nbcntcnt"> <a href="notset.html" class="nbcntbutton" id="snbb">Overview</a> <a href="notset.html" class="nbcntb ...

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

Spacious width that doesn't require a horizontal scrollbar for navigation

My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrap ...

What is the best way to create a fixed positioning for a div within a Material-UI table container?

When using the Material UI Table, I encountered an issue with applying the sticky property. The table itself works fine, but I also have a button inside the TableContainer that should be sticky alongside the table head. I attempted to achieve this by using ...

Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}> <Modal.Header closeButton> <Modal.Title>Check out our latest items!</Modal.Title> </Modal ...

Troubleshooting an issue with IE regarding box-shadow CSS functionality

I have a problem with my website design where the box-shadow effect on the top menu is not displaying properly in Internet Explorer. I tried adding specific code for IE8 and lower versions to fix this issue: zoom:1; /* This enables hasLayout, which is nec ...

What is the best way to utilize jQuery in order to present additional options within a form?

Let's consider a scenario where you have an HTML form: <form> <select name="vehicles"> <option value="all">All Vehicles</option> <option value="car1">Car 1</option> <option value="car2">Car 2< ...

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

Expanding Vue Tabs with Bootstrap: Manipulating tab-content to perfectly fill parent height

On my webpage, I have implemented a tabs component called b-tabs. This component is enclosed within a parent div with a specific height. I am trying to make the content of the tabs take up the full remaining height of the parent component. https://i.ssta ...

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

Transferring a dynamic HTML file created using R's animation package onto a WordPress platform

After using the animation package in R to create an HTML file, I'm facing some challenges uploading it to my WordPress blog. It appears that additional js or css files may be required for proper functionality, but I'm uncertain about the process. ...

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

Modifying app aesthetics on-the-fly in Angular

I am currently working on implementing various color schemes to customize our app, and I want Angular to dynamically apply one based on user preferences. In our scenario, the UI will be accessed by multiple clients, each with their own preferred color sch ...

Expanding the flexbox container to accommodate additional divs when they are added

I'm encountering an issue with a div not extending properly, causing two other divs to overlap. I've managed to position the divs correctly, but now I need the "100% all beef weenies" text to appear below the items. Any suggestions on how to achi ...

Position fixed iframe neglects right and bottom positioning

Here is the code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head></head> <body> <iframe src="htt ...

What could be causing the issue of my navbar text not changing color using CSS?

Despite several attempts, I am unable to change the color of the hyperlinks in blue or purple using the HTML and CSS below. Can anyone point out what I might be missing? nav ul { /* Navbar unordered */ list-style: none; text-align: center; backgr ...

Utilizing jQuery for seamless transitions between multiple background images

Looking to create a dynamic page using jQuery that alternates between different large background images for a fading effect. How can I achieve this? ...

The HTML page is not responsive to the screen size of the mobile device

Check out my HTML code: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style type= ...

The dynamic loading of an HTML/JavaScript input range object within a div is not functioning properly

Hey there, I have a hidden div containing a range input: <div id="hiddencontainer" style="display:none;"> <input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/> </div> The ...

Incorporating orientation settings within a media query using MUI

In my current project, I am utilizing MUI in conjunction with React. To specifically style the iPad resolution using MUI breakpoints, I have implemented the following code snippet: contentBox:{ width:"10%", paddingLeft:"10p ...