Animated Portfolio Cards

animated-portfolio-cards.markdown

Animated Portfolio Cards

A Pen by Andres on CodePen.

License.

index.pug

html(lang="es")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title Animated Cards
  body
    main.portfolio
      h1 Nuestro portafolio
      section.wrapper
        article.item
          img.pic(src='https://placeimg.com/195/230/any' alt='img1')
          .text
            h2 Lorem Ipsum
            p Lorem ipsum asdfasdf asdfadsf asdfasdfa asdfadfadfasdf adsfadsf asdfadf asdfa adsfadsf asdf asdfasdfad asdf adsfadsfasdfaasdf asdf
      
        article.item
          img.pic(src='https://placeimg.com/195/230/any' alt='img1')
          .text
            h2 Lorem Ipsum
            p Lorem ipsum asdfasdf asdfadsf asdfasdfa asdfadfadfasdf adsfadsf asdfadf asdfa adsfadsf asdf asdfasdfad asdf adsfadsfasdfaasdf asdf

        article.item
          img.pic(src='https://placeimg.com/195/230/any' alt='img1')
          .text
            h2 Lorem Ipsum
            p Lorem ipsum asdfasdf asdfadsf asdfasdfa asdfadfadfasdf adsfadsf asdfadf asdfa adsfadsf asdf asdfasdfad asdf adsfadsfasdfaasdf asdf
            

style.sass

*
  margin: 0
  padding: 0
  box-sizing: border-box

img
  width: 100%
  filter: grayscale(100%)
  
body
  background-color: #e2e2e2
  font-family: arial, verdana, helvetica sans-serif
  
.portfolio
  max-width: 1400px
  width: 90%
  margin: auto
  
.portfolio h1
  text-align: center
  font-size: 38px
  margin: 15px 0 40px
  
.wrapper
  display: flex
  justify-content: space-between
  
.item
  width: 30%
  height: 397px
  position: relative
  overflow: hidden
  box-shadow: 0 0 10px
  border-radius: 3px
  
.pic
  transition: all 0.5s
  // border-radius: 3px 3px 0
  
.text
  position: absolute
  bottom: 0
  padding: 20px
  background-color: rgba(0,0,0,.7)
  color: white
  // border-radius: 0 0 3px
  
  transform: translateY(100%)
  transition: all 0.5s ease-out
  
.text p
  text-align: justify
  
.item:hover .text
  transform: translateY(0%)
  
.item:hover .pic
  filter: grayscale(0%)
  transform: scale(1.15)