cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                  <div class="container container--gallery">       	    
      <header class="rtc-header"> 
      <h1><a href="https://codepen.io/atelierbram/pen/CriFb">Images overlay - clipped</a></h1>
      <h2><span class="small clear"> CSS transitions triggered by &middot; jQuery toggleClass on hover</span></h2> 
      </header> 

      <ul class="thumbnails ">

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

        <li class="span4 span4--gallery">
        <div class="thumbnail">
          <a class="overlayer-wrapperlink" href="#">
            <img src="https://lh3.googleusercontent.com/-_sTt33fMURw/UPLfSa6zLYI/AAAAAAAAAU4/PBjLGMXIM7Y/s800/placeholder-290x290.png" alt="img" class="gallery-image" />
            <div class="overlay overlay--gallery"> 
              <div class="caption--gallery"> 
                <h3>Title Item</h3>
                <p>Category Tag</p>
              </div> 
            </div>
          </a>
        </div><!--End Thumbnail-->
        </li>

      </ul>            

      <footer class="rtc-footer"> 
      <h3 class="mls">Resources</h3>

      <div class="span4 span4--gallery"> 
        <h4>css-tricks</h4>
        <ul>
          <li><a href="https://css-tricks.com/forums/discussion/21727/trouble-rendering-circle-overlays-in-chrome-and-safari">CSS-Tricks Forum discussion</a></li> 
          <li><a href="https://css-tricks.com/different-transitions-for-hover-on-hover-off/">Different Transitions</a></li>
        </ul> 
      </div>
      <div class="span4 span4--gallery"> 

        <h4>CSS clip propery</h4>
        <ul>
          <li><a href="https://css-tricks.com/almanac/properties/c/clip/">css-tricks.com</a></li>
          <li><a href="http://www.impressivewebs.com/css-clip-property/">impressivewebs.com</a></li> 
          <li><a href="https://developer.mozilla.org/en-US/docs/CSS/clip">developer.mozilla.org</a></li> 
        </ul> 
      </div>

      <div class="span4 span4--gallery"> 
        <h4>Javascript</h4>
        <ul>
          <li><a href="https://jquery.com/">jQuery</a></li> 
          <li><a href="https://api.jquery.com/toggleClass/">toggle class</a></li>
        </ul> 
      </div>

      </footer> 

    </div><!--End Container-->
            
          
!
            
              * { 
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; 
  outline: 1px dotted salmon; 
}

ol, ul {
  list-style: none; 
} 

body {
  font: 100%/1.375 sans-serif;
  color: #333;
  background-color: #F0EEF1;
  padding-top: 60px;
  padding-bottom: 40px;
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}

a {
  color: #0088cc;
  text-decoration: none;
}
a:visited {
  color: #511b5e;
}
a:hover {
  color: #005580;
} 
a:active  {
  color: #0f7a7d
} 
.rtc-header {
  text-align: center; 
}
h1,
h2,
h3 {
  margin: 10px 0;
  font-weight: bold;
  line-height: 20px;
  text-rendering: optimizelegibility;
}

h1,
h2,
h3 {
  line-height: 40px;
}
.rtc-header h1 {
  font-size: 32px;
} 

h1 {
  font-size: 38px;
}
h2 {
  font-size: 32px;
}
.rtc-header h2 {
  font-size: 28px;
} 
h3 {
  font-size: 24px;
}
h2 .small {
  font-size: 20px;
}

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.clearfix:before,
.clearfix:after, 
.container--gallery:before,
.container--gallery:after,
.thumbnails:before,
.thumbnails:after { 
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after, 
.container--gallery:after, 
.thumbnails:after,
.clear {
  clear: both;
}
.container--gallery {
  margin-left: auto;
  margin-right: auto;
}

.thumbnail, 
.thumbnail img,
.overlayer-wrapperlink,
.overlay--gallery,
.overlay--gallery:hover { -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.thumbnail { 
  display: block;
  /* position: relative; */
  z-index: 1;
  /* padding: 4px; */
  line-height: 20px;
}

a.thumbnail:hover {
  border-color: #0088cc;
}

.thumbnails > li, 
.rtc-footer .span4--gallery {
  float: left;
  margin-bottom: 20px
}

/* .thumbnail a  */
.overlayer-wrapperlink { 
  /* border: 1px solid transparent; */
  background-color: #d5d5d5; 
  display: block;	
  padding: 6px;
  text-decoration: none; 
  position: relative;
  top: 0;
  bottom: 0;
}

.overlayer-wrapperlink:hover {
  /* border-color: #0f7a7d; */
  background-color: #118f92; 
}
.overlay--gallery {
  z-index: 99; 
  width: 218px;
  height: 218px;     
  clip: rect(130px, 218px, 218px, 0);
  text-align: center; 
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
  background-color: transparent;
  -webkit-transition: all 0.2s ease-in-out; 
  -moz-transition: all 0.2s ease-in-out; 
  -o-transition: all 0.2s ease-in-out; 
  transition: all 0.2s ease-in-out; 

}

.is-caption-visible .overlay--gallery {
  background-color: rgba(0,0,0,.75);
  visibility: visible; 
  bottom: 0;
} 

.caption--gallery { 
  padding: 1em 0 0 10px;
  z-index: 0;
  margin-top: 60%;
  margin-left: -10px;
  position: absolute;
  bottom: -318px;
  left: 0;
  width: 218px; 
  height: 97px; 
  -webkit-transition: all 0.2s ease-in-out; 
  -moz-transition: all 0.2s ease-in-out; 
  -o-transition: all 0.2s ease-in-out; 
  transition: all 0.2s ease-in-out; 
} 
.is-caption-visible .caption--gallery { 
  bottom: 0; 
}

.overlay--gallery h3, .overlay--gallery p {
  color: #fff;
  text-align: center;
}


.overlay--gallery h3 {
  font-size: normal;
  font-weight: normal;
}

.overlay--gallery p {
  font-size: 14px;
}

.rtc-header,
.rtc-footer { 
  overflow: hidden;
}

.rtc-footer a {
  padding: .25em .5em;
}
.mls {
  margin-left: .5em;
}

@media only screen and (max-width: 767px) {
  .container--gallery {
    width: auto;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }

  .thumbnails {
    margin-left: 0;
  }
  .thumbnails > li {
    float: none;
    margin-left: 0;
  }
  [class*="span"] {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
  [class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
  }
  .container--gallery {
    width: 725px;
  }
  .span4--gallery {
    width: 215px;
  } 
}

@media only screen and (max-width: 979px) {

  .thumbnail a, 
  .thumbnail img {	
    width: 206px;
    height: 206px;
  } 

  .caption--gallery { 
    padding-top: 0;
  }

  .overlay--gallery h3 {
    font-size: 20px;
    margin-bottom: 0;
  }

  .overlay--gallery p {
    font-size: 13px;
  }
}

@media only screen and (min-width: 980px) {

  .container--gallery {
    width: 938px;
    outline: 1px dotted gray;
  } 
  .span4--gallery {
    width: 286px;
    background-color: rgba(255,255,255,.25);
  }

  .thumbnail img {
    width: 286px;
    height: 286px;
    vertical-align: middle; 
    z-index: 3;
    background-color: rgba(0,0,0,.25);
    outline: 1px dotted blueviolet;
  }

  .overlay--gallery {
    width: 286px;
    height: 298px;     
    clip: rect(197px, 286px, 298px, 0);
  }
  .caption--gallery { 
    width: 290px;
    height: 110px;
  } 

}


            
          
!
            
                  $(document).ready(function () {

$(function() {
    $(".overlayer-wrapperlink").hover(function () {
      $(this).toggleClass("is-caption-visible");
    });
});

});

/* ===== How it works ===== 
 
 * The caption -> `.caption--gallery`, is absolute positioned using a negative bottom value ( been giving a fixed width and height, but different values for some mediaqueries ). It's invisible because the parent overlay `overlay--gallery` where it sits in is invisible. 
 * When the link, where the image ( + overlay + caption ) sits in, is hovered ( in or out ), a class ( `.is-caption-visible` ) is 'toggled' on that `.overlayer-wrapperlink`, by means of a few lines of jQuery javascript. 
 * So on hover the negative value on the caption is removed --> `.is-caption-visible .caption--gallery { bottom: 0; ) }` making it that, with the help of css transitions, it appears to come 'animated' from under.  
 * So the overlay `overlay--gallery`, that appears semi-transparent-black on hover ( and which is clipped 2/3 from the top ), was in the same exact position all the time, but made invisible by `visibility: hidden;` and transparent background. And on hover, visibility + background semi-transparency is restored, this ( again with css transitions ) making it look like a fade-in fade-out effect, from a state of transparency to semi-transparent-black and vice versa.  
 */

            
          
!
999px
Loading ..................

Console