Tips on concealing the top and bottom sections of an image within a bootstrap card

Utilizing the Bootstrap card to showcase a list of videos, but encountering an issue with the YouTube video thumbnail (hqdefault.jpg) showing a black strip on top and bottom of the image that I wish to conceal for a better appearance.

I attempted using .card-img-top{position:absolute; top:-30px; } but it caused a disruption to the overall design.

Click here for more details.

<div class="container py-5">
       
    <div class="row pb-5 mb-4">
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0"><img src="https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg" alt="" class="w-100 card-img-top">
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0"><img src="https://img.youtube.com/vi/EMVPpPE_Bx4/hqdefault.jpg" alt="" class="w-100 card-img-top">
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0"><img src="https://img.youtube.com/vi/22BXPLkyocw/hqdefault.jpg" alt="" class="w-100 card-img-top">
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0"><img src="https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg" alt="" class="w-100 card-img-top">
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

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

</div>
htmlcss

Answer №1

The most effective way to solve the issue is by using overflow hidden with a negative margin percentage:

body {
    min-height: 100vh;
    background: #fafafa;
}


.social-link {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 50%;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.social-link:hover, .social-link:focus {
    background: #ddd;
    text-decoration: none;
    color: #555;
}

.progress {
    height: 10px;
}
.card-body {
  overflow: hidden;
}

/* update: */
.photo {
  overflow: hidden;
}
.photo img {
  margin: -10% 0 -10% 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container py-5">

    <div class="row pb-5 mb-4">
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                  <div class="photo">
                    <img src="https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg" alt="" class="w-100 card-img-top">
                  </div>

                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

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

        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                  <div class="photo">
                    <img src="https://img.youtube.com/vi/EMVPpPE_Bx4/hqdefault.jpg" alt="" class="w-100 card-img-top">
                  </div>

                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

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

        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                  <div class="photo">
                    <img src="https://img.youtube.com/vi/22BXPLkyocw/hqdefault.jpg" alt="" class="w-100 card-img-top">
                  </div>

                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

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

        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                  <div class="photo">
                    <img src="https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg" alt="" class="w-100 card-img-top">
                  </div>

                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

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

</div>

Answer №2

To achieve this effect, simply insert a background image using the following CSS code:

.bg {
    height: 235px;
    background-position: center;
    background-position-x: inherit;
    background-repeat: no-repeat;
    background-size: 100% 134%;
    background-position: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container py-5">
       
    <div class="row pb-5 mb-4">
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                <div style="background-image: url('https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg');" alt="" class="w-100 card-img-top bg">
                </div>
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                <div style="background-image: url('https://img.youtube.com/vi/EMVPpPE_Bx4/hqdefault.jpg');" alt="" class="w-100 card-img-top bg">
                </div>
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                <div style="background-image: url('https://img.youtube.com/vi/22BXPLkyocw/hqdefault.jpg');" alt="" class="w-100 card-img-top bg">
                </div>
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- Card-->
            <div class="card shadow-sm border-0 rounded">
                <div class="card-body p-0">
                <div style="background-image: url('https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg');" alt="" class="w-100 card-img-top bg">
                </div>
                    <div class="p-4">
                        <h5 class="mb-0">Mark Rockwell</h5>
                        <p class="small text-muted">CEO - Consultant</p>

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

</div>

Answer №3

Here are two suggestions for you:

  1. Modify the bootstraps col and row classes to adjust the height until you reach the dimensions of 1280x720 (standard YouTube thumbnail size).
  2. (Highly Recommended). Create your own rows and columns using grid-template-areas. This CSS property is incredibly versatile and allows you to easily structure your layout.
grid-template-areas: 'youtube_video youtube_video youtube_video';

This CSS property is straightforward to understand and yields powerful results.

Explore grid-template-areas on the tryit editor here

Once you customize your col and row, remember to set the image width and height to 1280 x 720

Answer №4

I have experimented with two different methods, and I have found both the margin at the top and bottom to be satisfactory. 

clip-path: polygon(0 13%, 100% 13%, 100% 87%, 0 87%);
Using clip-path will trim the top and bottom sections. Another approach involves utilizing a background.

body {
    min-height: 100vh;
    background: #fafafa;
}


.social-link {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 50%;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.social-link:hover, .social-link:focus {
    background: #ddd;
    text-decoration: none;
    color: #555;
}

.progress {
    height: 10px;
}

.card-img-top{
 background: var(--i) no-repeat;
  background-position: center;
  background-size: 100% 140%;
  display: block;
  min-height: 250px;
  width: 100%;
  
  
  
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container py-5">

  <div class="row pb-5 mb-4">
    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
      <!-- Card-->
      <div class="card shadow-sm border-0 rounded">
        <div class="card-body p-0"><img src="" style="--i:url(https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg)" alt="" class="w-100 card-img-top">
          <div class="p-4">
            <h5 class="mb-0">Mark Rockwell</h5>
            <p class="small text-muted">CEO - Consultant</p>

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

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
      <!-- Card-->
      <div class="card shadow-sm border-0 rounded">
        <div class="card-body p-0">
          <img src="" style="--i:url(https://img.youtube.com/vi/EMVPpPE_Bx4/hqdefault.jpg)" alt="" class="w-100 card-img-top">
          <div class="p-4">
            <h5 class="mb-0">Mark Rockwell</h5>
            <p class="small text-muted">CEO - Consultant</p>

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

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
      <!-- Card-->
      <div class="card shadow-sm border-0 rounded">
        <div class="card-body p-0"><img src="" style="--i:url(https://img.youtube.com/vi/22BXPLkyocw/hqdefault.jpg)" alt="" class="w-100 card-img-top">
          <div class="p-4">
            <h5 class="mb-0">Mark Rockwell</h5>
            <p class="small text-muted">CEO - Consultant</p>

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

    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
      <!-- Card-->
      <div class="card shadow-sm border-0 rounded">
        <div class="card-body p-0"><img src="" style="--i:url(https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg)" alt="" class="w-100 card-img-top">
          <div class="p-4">
            <h5 class="mb-0">Mark Rockwell</h5>
            <p class="small text-muted">CEO - Consultant</p>

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

</div>

Answer №5

View the attached code screenshot

To enhance the image layout, I have enclosed your img in a figure tag and assigned it a specific height. Additionally, I applied a height of 100% and object-fit cover to the image itself, resulting in the automatic hiding of any black background.

<figure>
  <img src="https://img.youtube.com/vi/Aymrnzianf0/hqdefault.jpg" alt="" 
  class="w-100 card-img-top">
</figure>

figure {
  margin: 0;
  height: 284px;
  border: 1px solid red;
}

figure img {
  height: 100%;
  object-fit: cover;
}

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

Having trouble with Jquery's .mouseover() method? Let's catch the solution!

I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...

javascriptjqueryhtmlcss

Finding attributes with spaces in their values using XPath

Is there a way to select an attribute with spaces in xpath? I am currently trying to select a checkbox attribute named "checked type". I have experimented with //[@checked type], //[@checked-type], //[@checked_type], and //[@checked\stype], but none ...

pythonhtmlseleniumxpath

Setting up automatic filtering for additional dropdown lists in Laravel is a useful feature that can enhance user

Hello! I am working with an application form and I would like to implement a feature where other dropdown lists automatically update based on the selection made in a previous dropdown. Specifically, I am looking to add a new dropdown list called "Country" ...

htmlmysqllaravellistdropdown

Transfer the data from a post request through routes following the MVC pattern

Encountering an issue when attempting to submit a post form with username and password, as an error stating Cannot POST /validateUser is displayed. The structure of my form is as follows: <!DOCTYPE html> <html> <head> <title> ...

htmlnode.jsmongodbexpressmongoose

What is causing me to have difficulty importing any of the images located in the public folder?

I'm currently tackling the NextJS framework, and I'm having trouble importing images that are stored in the public folder. Despite being able to navigate through folders, the images aren't displaying as expected. Here is the import line and ...

htmlreactjsnext.jstailwind-cssreact-fullstack

Is there a way to verify the presence of a meta description in Selenium IDE?

Currently, I am utilizing the Command & Target provided by Selenium IDE to validate the precise text of a meta description verifyelementpresent : //meta[@name='description' and @content='description here'] I want to ensure tha ...

htmlcssseleniumautomated-testsselenium-ide

The Openwave mobile browser is having trouble understanding CSS child selectors and descendant selectors

While testing my website on my LG VX8360 cell phone with Openwave Mobile Browser 6.2.3.2, I encountered a problem with CSS child selectors and descendant selectors. Despite specifying that only the second div should have a yellow background, both divs disp ...

htmlcssmobile

A guide on verifying the username, password, and chosen role from a database through the use of javascript/ajax or alternative validation methods

If the user's name, password, or role is incorrect, I want to display an error message using validations like AJAX/JavaScript. index.php <html> <head> </head> <body> <style> body { wi ...

javascriptphpjqueryhtmlajax

Is CSS Transition smoothly easing in, but not out?

On the image gallery of this website , I have applied transitions to the images, where they ease in (fade in), but revert back to their original state instantly when the mouse moves off the image. Is there a way to make the transition reverse when the mo ...

htmlcss

What is the best way to retrieve a GWT textbox value using Selenium WebDriver?

I'm currently testing my GWT application with selenium, and the HTML generated by GWT Textbox appears like this: <input type="text" class="gwt-TextBox" > Even though there's no value visible in the code above, I can see text in the UI. Is ...

htmlgwtselenium

What is the best way to increase the width of Bootstrap responsive tables?

When using Bootstrap 5 to create responsive tables, I encountered an issue where columns with a lot of text caused other columns to get squished, resulting in a weird appearance. I am looking for a way to prevent this by ensuring that columns with less tex ...

htmlcsshtml-tablebootstrap-5

Responsive input form causes floating label to be positioned incorrectly

I have crafted a form using Django, Crispy Forms, and Bootstrap. When the screen width is above 575px, everything looks great with fields of appropriate width and floating labels in their correct position. However, when the screen width drops below 575px, ...

htmlcssbootstrap-5

Adding a thin line at the bottom of the element(s) positioned above a horizontal row with a bottom border

I have a variable number of items that may or may not fit in one "row" inside a container. If they do not fit, additional "row(s)" should be created. Each item will only contain a single word (or maximum 2), keeping the data to one line. I want each item ...

htmlcsslinear-gradients

Personalize the tooltip feature in highchart

I am looking to enhance the tooltip feature in HighChart. Currently, on hover of my bar chart, only one value is displayed in the tooltip. However, I would like to display three values instead. Here is a snippet of my code: $(function () { $( ...

jqueryhtmlhighchartsbar-chart

create a hexagon-shaped video player

Does anyone know of a video player that can take on unconventional shapes like a hexagon or other unique designs? YouTube doesn't seem to offer this feature - is there a Flash or HTML 5 player out there that can accommodate customized video shapes? ...

htmlvideohtml5-videovideo-processing

Changes in vertical position of link icon within div based on the browser and operating system

Trying to design a straightforward 3-line mobile menu dropdown, but encountering inconsistency in appearance across different devices. The vertical positioning of the icon is varying based on the operating system and browser version: Linux -desktop Fire ...

androidhtmlcss

Adjusting the position of the floating image on the left side will impact the height of the container

When attempting to execute the code below: ​<div id="container"> //This is a 200x200 image <img src="http://dummyimage.com/200x200/CCC/000" /> </div>​​​​​​​​​​​​​​​​​​​​​​ ...

css

Issue with displaying response data from Angular API in the template

I am retrieving categories from the backend and trying to display them in a table. However, there seems to be an issue with my code as no data is showing up in the table. Although the getFournisseurs method is successfully fetching 5 items from the backen ...

htmlangulartypescriptspringdisplay

Automatically close one option upon opening another

Displayed below is the HTML code that I have printed with echo: <input id="58" readonly="readonly" class="cell_to_edit" value="Accepted"> <span id="58" class="toggle_status"> <select class="status_change"> <option>Ac ...

javascriptphpjqueryhtmlajax

Adjusting the hue of each fifth div

There are multiple divs in a row, with 4 divs in each row. To adjust the padding of every 4th div, I'm using the nth-child selector. Now, I am looking to modify the rollover property every 5th time. Here is an example of what I have in mind: .cont ...

htmlcsscss-selectors