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 Kristian Woods
Kristian Woods
23,414 Points

CSS Animation - Photo-Overlay Slider

Hey, I'm trying to create a CSS animation photo-overlay slider. Basically, I would like the photo-overlay to occur when the user hovers over the image.

I have inserted everything inside a div and set the div to overflow: hidden - however, at the bottom, the photo-overlay is breaking from the container. How do I keep the image and photo-overlay inside the containing div - hiding everything that is outside the div.

Thanks

<div class="photo-container">
                <div class="photo slide">
                 <img src="mengle-great-buddha-temple.jpg" alt="">
                    <div class="photo-overlay">
                        <h3>Hello!</h3>
                        <a href="#">Download</a>
                    </div>
                </div>

            </div>

.photo-container {
    width: 30%;
    float: left;
}

.photo-container img {
    max-width: 100%;
}

.photo {
    position: relative;
    overflow: hidden;
}


.photo-overlay {
text-align: center;
font-size: 3em;
background: lightblue;
color: #fff;
position: absolute;
top: 0;
right: 0;
bottom: 0; 
left: 0;
padding-left: 20px;
padding-right: 20px;
}

a {
    background: blue;
    color: aliceblue;
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    width: 45%;
    padding: 0;
    margin: 0;
}

.slide .photo-overlay,
.slide img {
    transition: transform .6s ease-out; 
}

.slide .photo-overlay {
    transform: translateX(-100%); 
}

.slide:hover .photo-overlay {
    transform: translateX(0); 
}

.slide:hover img {
    transform: translateX(100%); 
}

1 Answer

Henrik Reponen
Henrik Reponen
475 Points
Henrik Reponen
Henrik Reponen
475 Points

The tiny sliver of extra space at the bottom is caused by the image element. By default images are inline-block elements that get extra space around themselves if the HTML is not all in one line, just like text does. There are a couple remedies to this:

  1. Remove white space from around the img tag in the HTML
  2. Simply set the image to be a block level element.

There's this video on TreeHouse on the topic as well

Happy coding

Kristian Woods
Kristian Woods
23,414 Points

Hey, Henrik, thank you for getting back to me!