Background Hover Two Page

Background Hover Two Page

DEMO 1 - Profile Info CSS Hover

<style type='text/css'>
.demo1 {width: 500px;height: 260px;overflow: hidden;position: relative;margin:0 auto}
.demo1 img {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: auto;
  height: 100%;
  float: left;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -o-transition: all 0.8s}

.demo1 .decs-info h3 {
  padding: 0px;
  margin-left: -5px;
  font-size: 22px;
  font-weight: 300;
  font-family: Verdana}

.demo1 .decs-info h4 {
  padding: 0px;
  padding-bottom: 13px;
  margin-left: -5px;
  font-size: 14px;
  letter-spacing: 3px;
  width: 100%;
  font-family: Verdana;
  text-transform: uppercase;
  border-bottom: 2px solid #000}

.demo1 .decs-info p {
  padding-top: 13px;
  font-size: 14px;
  line-height: 20px;
  font-family: Verdana;
  margin-left: -5px;}

.demo1 .decs-info {
  width: 43%;
  height: 89%;
  position: absolute;
  top: 0%;
  left: 50%;
  padding: 3% 4%;
  background: blue;
  color: white;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;}

.demo1:hover .decs-info {
  display: block !important;
  color: white;
  background: rgba(0,157,40, 0.85);
  left: 0px;
  top: 0px;}

.demo1 .text {
  width: 50%;
  height: inherit;
  background: #000;
  float: left;
  position: absolute;
  left: 50%}

.demo1 .text p {
  padding: 100px 0px 0px 20px;
  font-size: 24px;
  font-family: Verdana;
  font-weight: 700;
  color: #fff}

.demo1 .text a {border-left:4px double red;margin-left:20px;}
.demo1 .text a, .bgRight .text {
  padding: 0px 0px 0px 8px;
  font-size: 12px !important;
  color: #FF5A22 !important;
  font-family: Verdana !important}

.demo1 .text {float: left}
.bgRight p {color: #000 !important}
.bgRight {
  background: #eee !important;
  width: 50% !important;
  height: inherit !important}
</style>

<div class="demo1">
<img src="URL-Gambar Anda.png"><div class="decs-info">
<h3>Sahabat Blogger 77</h3>
<h4>Web Desainer</h4>
<p>..Tulis Sesuatu Disisni..</p>
</div>
<div class="bgRight text">
<p>Devy Indriyani</p>
<a href="http://sahabatblogger77.blogspot.com/">Join To Website</a>
</div>
</div>