Profile CSS Hover Effect

HTML + CSS ONLY

Jane Doe

Developer

Nulla rhoncus orci sed odio euismod vestibulum. Praesent porta aliquet nulla, ut mattis velit rhoncus eu duspendisse nibh orci laoreet.

Jane Doe

@JaneDoe

Code:

Profile CSS Hover Effect
HTML + CSS ONLY
 Jane Doe
Developer
Nulla rhoncus orci sed odio euismod vestibulum. Praesent porta aliquet nulla, ut mattis velit rhoncus eu duspendisse nibh orci laoreet.
Jane Doe
@JaneDoe

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);body{background:#485b6e}.container{max-width:500px;margin-left:auto;margin-right:auto;margin-top:10%}h1{font-family:"Open Sans",sans;font-weight:300;text-align:center;color:rgba(255,255,255,.6)}h2{color:#2c3e52;font-family:"Open Sans",sans;font-size:14px;text-align:center;font-weight:700;margin-bottom:50px}.service-details{height:250px;overflow:hidden;position:relative}.service-details img{position:absolute;top:0;left:0;height:inherit;width:auto;height:100%;float:left;transition:all .8s;-moz-transition:all .8s}.service-details:hover img{}.service-details .service-hover-text h3{padding:0;margin:0;font-size:25px;font-weight:300;font-family:"Open Sans"}.service-details .service-hover-text h4{padding:0;padding-bottom:13px;margin:0;font-size:14px;letter-spacing:3px;width:90%;font-family:"Open Sans";text-transform:uppercase;border-bottom:2px solid #000}.service-details .service-hover-text p{padding-top:13px;font-size:14px;line-height:20px;font-family:"Open Sans"}.service-details .service-hover-text{width:42%;height:89%;position:absolute;top:0;left:50%;padding:3% 4%;background:#D90E0E;color:white;transition:all .5s ease-in-out;-moz-transition:all .4s}.service-details:hover .service-hover-text{display:block!important;color:white;background:rgba(217,14,14,.85);left:0;top:0}.service-details .service-text{width:50%;height:inherit;background:#000;float:left;position:absolute;left:50%}.service-details .service-text p{padding:100px 0 0 20px;font-size:24px;font-family:"Open Sans";font-weight:700;color:#fff}.service-details .service-text p span{font-family:"Open Sans"!important}.service-details .service-text a,.service-white .service-text{padding:0 0 0 20px;font-size:14px!important;color:#FF5A22!important;font-family:"Open Sans"!important;text-decoration:none!important}.service-details .service-text{float:left}.service-white{background:#eee!important;width:50%!important;height:inherit!important}.service-white p{color:#000!important}