Hover Textbox Overflow Pt2

hover-textbox-overflow-pt2.markdown

Hover Textbox Overflow Pt2

A demonstration of how to overflow box layouts

Pt2 demonstrates how you can overclip a partial text to resize the entire box

Uses a combination of hover, :before pseudoselectors, specific right and bottom borders.

A Pen by Vincent Tang on CodePen.

License.

index.pug

section
  h1 Hover over the h1 below rubber ducky
  p The other box positions do not change
  p Applications useful in ecommerce sites that have heavily condensed material.
.wrapper
  - for (var x = 0; x < 13; x++)
    .product-box
      .content
        img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/rubberDuck.jpg", alt="")
        h3.hidden-clip Hover over THIS line! - Quack Quack Quack Quack Quack Quack Quack Quack Quack
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non.

style.scss

* {
  box-sizing: border-box;
}
p {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid black;
  border-top: 1px solid black;
}
.product-box {
  position: relative;
  width: 200px;
  overflow: hidden;
  // background-color: lightgrey; /* Not needed but just incase */
  // border-bottom: 1px solid black;
  // border-right: 1px solid black;
  &:hover {
    overflow: visible;
    border: none;
  }
}
img {
  max-height: 100px;
}
.content {
  padding: 5px;
  background-color: lightgrey;
  border-bottom: 1px solid black;
  border-right: 1px solid black;  
  &:hover{
    position: absolute;
    z-index: 55;
    overflow: visible;
    background-color: lightyellow;
    transition: all 0.5s ease-out;

    // border-right: 1px solid black;
    &:before {
      content:'';
      position: absolute;
      left: -1px;
      width: 1px;
      height: 99%; /* I have no idea why this is 99%*/
      background-color: black;
    }
  }
}
.hidden-clip {
  max-height: 20px;
  overflow: hidden;
  &:hover {
    max-height: 1000px;
  }
}