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

Duane Fouche
Duane Fouche
8,934 Points
Posted by 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
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
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.