css3 - need css trick to solve this issue -

-

hi guys i'm working on website orange background. i'm using white social icons font awesome library.

here result of work

css

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); @import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-    awesome.min.css');  body { margin: 10px; background:#da4a10; } #social:hover {             -webkit-transform:scale(1.1);  -moz-transform:scale(1.1);  -o-transform:scale(1.1);          } #social { -webkit-transform:scale(0.8);             /* browser variations: */ -moz-transform:scale(0.8); -o-transform:scale(0.8);  -webkit-transition-duration: 0.5s;  -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;         }    .fa-3x{ color: white; } .social-fb:hover {             color: #3b5998;         } .social-tw:hover {             color: #4099ff;         } .social-gp:hover {             color: #d34836;         }         .social-em:hover {             color: #f39c12;         }

html

<div id="row">             <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">               <a href="#">                 <i id="social" class="fa fa-facebook-square fa-3x social-fb"></i>               </a>             </div>             <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">               <a href="#">                 <i id="social" class="fa fa-twitter-square fa-3x social-tw"></i>               </a>             </div>             <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">               <a href="#">                 <i id="social" class="fa fa-google-plus-square fa-3x social-gp"></i>               </a>             </div>             <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6 ">               <a href="#">                 <i id="social" class="fa fa-envelope-square fa-3x social-em"></i>               </a>             </div>           </div>

http://jsfiddle.net/dtchh/5582/

i need solution because when hover on social icons, of not nice. tried adding white background icons it's still not functioning properly.

since using font awesome, there icon available called: fa-square. has exact shape of square social media icons. also, font awesome has opportunity stack icons. if stack fa-square under fa-twitter-square e.g. , make fa-square white, solve problem.

html

<div id="row">     <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">         <a href="#">             <span class="fa-stack fa-2x social social-fb">                 <i class="fa fa-square fa-stack-1x white-bg"></i>                 <i class="fa fa-facebook-square fa-stack-2x "></i>                                 </span>         </a>     </div>     <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">         <a href="#">             <span class="fa-stack fa-2x social social-tw">                 <i class="fa fa-square fa-stack-1x white-bg"></i>                 <i class="fa fa-twitter-square fa-stack-2x "></i>                                 </span>         </a>     </div>     <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">         <a href="#">             <span class="fa-stack fa-2x social social-gp">                 <i class="fa fa-square fa-stack-1x white-bg"></i>                 <i class="fa fa-google-plus-square fa-stack-2x "></i>                                 </span>         </a>     </div>     <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6 ">         <a href="#">             <span class="fa-stack fa-2x social social-em">                 <i class="fa fa-square fa-stack-1x white-bg"></i>                 <i class="fa fa-envelope-square fa-stack-2x "></i>                                 </span>         </a>                      </div> </div>

css

/* optional theme */ @import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); @import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');  body {     background: #da4a10;       margin: 10px;       } .social {     color: #f9f9f9;     transition: 0.5s;     -moz-transition: 0.5s;     -ms-transition: 0.5s;     -o-transition: 0.5s;     -webkit-transition: 0.5s;      } /* definition of white background */ .white-bg {     color: white;     font-size: 54px;     opacity: 0;     transition: 0.5s;     -moz-transition: 0.5s;     -ms-transition: 0.5s;     -o-transition: 0.5s;     -webkit-transition: 0.5s;  }   .social-fb:hover{     color: #3b5998; } .social-tw:hover {     color: #4099ff; } .social-gp:hover {     color: #d34836; } .social-em:hover {     color: #f39c12; } /* show white background on hover */ .social-fb:hover .white-bg, .social-tw:hover .white-bg, .social-gp:hover .white-bg, .social-em:hover .white-bg {         opacity: 1; }

solution in action: http://jsfiddle.net/dtchh/6084/


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more