Skip to content
[Sandbox] Animations on hover on blocks elements with background image - made with CSS3
CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
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

You can’t perform that action at this time.