What CSS hover effect is being used on this website?

debugcn Published at Dev

Lisa Jaffe

I am looking to find a jquery effect like the one featured on the 5 icons at this website http://ngelectrical.com.au/. It slides open when hovered over..

Can anyone help me to find more information regarding this effect?

Thanks!

zessx

Here is an example to do it without any Javascript. It doesn't even use CSS animations, but just a few transitions:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #ccc;
  font-family: 'Open Sans', sans-serif;
}
.card {
  position: relative;
  float: left;
  text-align: center;
  width: 100px;
  padding: 20px 20px 10px;
  margin: 20px;
  border-radius: 5px;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  border-radius: 5px 5px 0 0;
  background: url(http://lorempixel.com/140/45/abstract/);
  z-index: 10;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.card i {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #333;
  box-shadow: 0 0 0 5px #fff;
  color: #fff;
  font-size: 30px;
  line-height: 50px;
  margin: 0 auto 10px;
  z-index: 20;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.card h2 {
  text-transform: uppercase;
  font-weight: bold;
  line-height: 40px;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.card p {
  line-height: 20px;
  font-size: 14px;
  height: 0;
  opacity: 0;
  -webkit-transition: all 0s;
  transition: all 0s;
}
.card:hover {
  background: #fff;
  box-shadow: 0 0 3px #333;
}
.card:hover:before {
  opacity: 1;
}
.card:hover i {
  background: orange;
}
.card:hover h2 {
  color: orange;
}
.card:hover p {
  height: auto;
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
}

<div class="card">
  <i>♥</i>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim.</p>
  <h2>Foo</h2>
</div>

<div class="card">
  <i>♦</i>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim.</p>
  <h2>Bar</h2>
</div>

<div class="card">
  <i>♣</i>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim.</p>
  <h2>Baz</h2>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.