Content Info On Hover

Content Info On Hover

DEMO 3 - Arrow Right Bottom Hover Info

<style type='text/css'>
p {margin: 0;padding: 0;}
.demo3 {
  background: url(URL-Gambar Anda.jpg);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 240px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 320px;
  border:3px double #fff}

.demo3 .border {
  border-bottom: 70px solid #31a344;
  border-left: 70px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .95;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 0;}

.demo3:hover .border {
  border-bottom: 800px solid #31a344;
  border-left: 800px solid transparent;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;}

.demo3 .info {
  bottom: 5px;
  color: yellow;
  position: absolute;
  right: 10px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  text-shadow:1px 1px 2px #111;
  font-weight:bold}

.demo3:hover .info {
  opacity: 0;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out}

.demo3 .text span {font:italic 12px/10px Calibri,serif}
.demo3 .text {
  bottom: 0;
  color: #fff;
  left: 0;
  opacity: 0;
  padding: 20px;
  position: absolute;
  right: 0;top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out}

.demo3 .text h2 {
  border-bottom: 3px double yellow;
  padding: 0 0 12px;font-size:24px;text-shadow:2px 2px 3px #111}

.demo3:hover .text {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s}
</style>

<div class="demo3">
      <div class="border">
      </div>
         <div class="info">Info</div>
            <div class="text">
               <h2>SAHABAT BLOGGER 77</h2>
<p>..Tulis Sesuatu Disisni..</p>
            </div>
</div>