Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Duane Fouche
Duane Fouche
8,934 Points

Corners of slideshow image visible through border radius while transitioning.

Hi all, I'm encountering some weird behavior with a CSS slideshow I am constructing.

I am using Jquery on the spans to make them change the current Figure on click. The figures have a border radius of 20px to give them rounded corners, a overflow of "hidden" and a transition to smooth everything out.

The problem I am encountering, is that during the 2s transition the outer corners of the image inside the figure are visible - ie: they are poking outside the rounded corners of the figure. After the transition they are hidden.

The html structure is like so:

<div class="slideshow"> 
          <figure class="show"> 
            <img src="img/slideshow/SS 06 Frameless Solar Roller.JPG"/> 
             <figcaption><h3>Enclosed Canvas Drop Blind</h3><p>Sahara Sand Outside View</p></figcaption> 
          </figure> 
          <figure> 
            <img src="img/slideshow/SS 07 Frameless Solar Roller.JPG"/> 
            <figcaption><h3>Enclosed Canvas Drop Blinds</h3><p>Autumn Brown Inside View</p></figcaption> 
          </figure>

And the CSS is like so (Note: I am using SASS, but I haven't optimized it yet):

.slideshow{
  position: relative;
  display: block;
  overflow: hidden;
  max-width: 906px;
  border: 3px solid $secondary-color;
  border-radius: 20px;
  margin: 0 auto;

  &:hover figcaption {
        bottom: 0;
    }

   img {
   width: 100%;
   transition: 1s opacity;
   }
}
figure{
  position: absolute;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  height: 350px;
  transition: 1s opacity;
}
figcaption{
  position: absolute;
  font-family: sans-serif;
  bottom: -200px;
  right: 0;
  width: 100%;
  color: #fff;
  background: rgba(0,0,0, .8);
  text-align: center;
  transition: all .6s ease;
  padding-bottom: 20px;

  h3 {
    color: #E4D413;
    font: $main-heading-font;
    margin: 10px 0 0 0;
    }

    p {
        font: $footer-font;
        color: #fff;
        margin: 0;
        padding: 0;
    }
}

figure.show{
    opacity: 1;
    position: static;
    transition: 2s opacity;
    overflow: hidden;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

I am at a loss on what the cause could be here, does anyone have an idea?

Thanks for any help.

Jake Lundberg
Jake Lundberg
13,965 Points

could you post your jquery code so we can see this in action?

Duane Fouche
Duane Fouche
8,934 Points

Jake Lundberg : Sorry, was out on the weekend so couldn't respond sooner.
My Jquery code is a mess at the moment as I just started modifying it to auto-run the slideshow once the page is loaded, and pause on hover (at this current point in the slides are not transitioning as I haven't finished yet).
I managed to jury-rig it to work as intended in the meantime by setting the images border-radius to 17px (ie: the slideshow border-radius minus the border width).
I would still like to know the cause of this behavior however, so I'll post the Jquery code once it's back in working order.
It may not be today however as I have very limited time per day to work on this as it is not my primary job, so things do take longer than I'd like to complete.