[Sandbox] Animations on hover on blocks elements with background image - made with CSS3
CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
images
README.md
index.html
og-img.jpg

README.md

Hover Block Animation

Sandbox

Animations on hover on blocks elements with background image - made with CSS3

Demo / Direct Download

How to contribute

  1. Fork this repo
  2. Edit the index.html and hover-block-animation.css
index.html
<section>
  <div class="title">Block | 1</div>
  <div class="block block-1">
    <div class="block-image">
    </div>
    <div class="block-text">
      <div class="block-text-center">
        <div>
          Lorem impsum dolor sit amet
        </div>
      </div>
    </div>
  </div>
</section>
css/hover-block-animation.css
/***/
/*** 1 ***/

.block-1 {
  transition: transform 500ms;
}
.block-1:hover {
  transform: scale(.95);
  transition: transform 500ms;
}
.block-1 .block-image {
  background-image: url('../images/block1.jpeg');
}
.block-1 .block-text {
  height: 100px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,162,164,0.8) 100%);
  transition: opacity 300ms;
  bottom: 0;
  top: auto;
}
.block-1:hover .block-text {
  opacity: 1;
  transition: opacity 1000ms;
}
.block-1 .block-text-center div {
  opacity: 0;
  color: white;
  padding-left: 40px;
  font-size: 25px;
  transform: translate(0, 10px);
  transition: opacity 200ms, transform 300ms;
}
.block-1:hover .block-text-center div {
  opacity: 1;
  transition: opacity 300ms, transform 500ms;
  transform: translate(0, 0);
  transition-delay: 100ms;
}
@media screen and (max-width: 640px) {
  .block-1 .block-text-center div {
    font-size: 15px;
    padding-left: 20px;
  }
  .block-1 .block-text {
    height: 50px;
  }
}

And push to create a pull request

Ressources

Pictures from unsplash

alt text About me

Follow me on Twitter - Github - Dribbble

© Théo Mesnil - 2016