Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Joseph Mercado
Joseph Mercado
5,846 Points

Stretching out image across card top non bootstrap

Trying to get my images to stretch across the top of my cards. I am trying this non-bootstrap. Below is my code in HTML and CSS. Any help would be greatly appreciated.

HTML Code:

<div class="container clearfix">
        <div class="card">
            <div class="container">
                <img src="img/filler1.jpg" alt="City">
                <h3>About</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate magnam aliquam laboriosam maiores aliquid quasi fugiat dolorem veniam. Blanditiis sunt nulla, sit qui veniam porro quasi asperiores maxime maiores ducimus.</p>
            </div>
        </div>
        <div class="card">
            <div class="container">
                <img src="img/filler1.jpg" alt="City">
                <h3>About</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate magnam aliquam laboriosam maiores aliquid quasi fugiat dolorem veniam. Blanditiis sunt nulla, sit qui veniam porro quasi asperiores maxime maiores ducimus.</p>
            </div>
        </div>
        <div class="card">
            <div class="container">
                <img src="img/filler1.jpg" alt="City">
                <h3>About</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate magnam aliquam laboriosam maiores aliquid quasi fugiat dolorem veniam. Blanditiis sunt nulla, sit qui veniam porro quasi asperiores maxime maiores ducimus.</p>
            </div>
        </div>
    </div>

CSS Code:

body {
    margin: 0;
    background: rgb(0, 153, 255);
    font-weight: 400;
    color: white;
    font-family: 'Spectral SC', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'PT Serif', serif;
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Inconsolata', monospace;
    font-family: 'Abel', sans-serif;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.card {
    width: 30%;
    /* border: 1px solid black; */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin-left: 2%;
    float: left;
}

.card img {
    width: 100%;
    height: 250px;
    border-radius: 5px 5px 0 0;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

1 Answer

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

Your images are inside the .container divs, which are set to 80% width of the card. Even though you have .card img { width: 100% }, the images will never be more than 80% of the .card width as they're children of the .container divs.

Moving the images outside of the container divs would be a good starting point to getting the effect you want.