html - Strange issue on image hover -


i´m doing effect on mouse image hover, i´m having problem.

i have 3 articles , when hover image other images moving right.

i found problem here: .second-effect:hover a.info{}, because if remove transform:scale(1,1) when hover image other images dont move.

but without transform icon font want show in center of image don´t appears.

the problem here:

.second-effect:hover a.info {     opacity:1;     -moz-transform:scale(1,1);     -webkit-transform:scale(1,1);     -o-transform:scale(1,1);     -ms-transform:scale(1,1);     transform:scale(1,1);     -moz-transition-delay:0.3s;     -webkit-transition-delay:0.3s;     -o-transition-delay:0.3s;     -ms-transition-delay:0.3s;     transition-delay:0.3s; }

so want have icon font in center of image inside square i´m doing css transitions.

if remove transform:scale(1,1) icon dont appears.

if dont remove code when hover image, other images moving.

can understand why happening?

my jsfiddle:

http://jsfiddle.net/ritz/m78qf/1/

my whole html issue:

 <article id="news">     <div class="view second-effect">         <img src="imagens/transferir (1).jpg" />         <div class="mask">             <a href="#" class="info"><i class="fa fa-download"></i></a>         </div>      </div>       <h2>        <a>title post number one</a>         <br />      </h2>      <span>date of post number one</span>       <p>post number one</p> </article>

my whole css issue:

.info>i{font-size:1.7em; margin-top:15px; color:#000;  }      #news img     {         width:155px;         height:140px;      }      .view a.info {         padding:0;        width:20px;        height:20px;     }      .view {        width: 155px;        height: 140px;        float: left;        overflow: hidden;        position: relative;        text-align: center;        box-shadow: 0px 0px 5px #aaa;        cursor: default;        margin-right:20px;         border:3px solid #ccc;        margin-top:4px;      }     .view .mask, .view .content {         width: 155px;        height: 140px;        position: absolute;        overflow: hidden;        top: 0;        left: 0;     }      .view img {        display: block;        position: relative;     }     .view a.info>i{      }         .second-effect .mask {        opacity: 0;        overflow:visible;        border:0px solid rgba(0,0,0,0.7);        -moz-box-sizing:border-box;        -webkit-box-sizing:border-box;        box-sizing:border-box;        -webkit-transition: 0.4s ease-in-out;        -moz-transition: 0.4s ease-in-out;        -o-transition: 0.4s ease-in-out;        -ms-transition: 0.4s ease-in-out;        transition: 0.4s ease-in-out;     }     .second-effect a.info {         position:relative;         top:-10px;         opacity:0;        -moz-transform:scale(0,0);        -webkit-transform:scale(0,0);        -o-transform:scale(0,0);        -ms-transform:scale(0,0);        transform:scale(0,0);        -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;        -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;        -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;        -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;        transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;     }     .second-effect:hover .mask {        opacity: 1;        border:55px solid rgba(0,0,0,0.7);     }     .second-effect:hover a.info {         opacity:1;         -moz-transform:scale(1,1);         -webkit-transform:scale(1,1);         -o-transform:scale(1,1);         -ms-transform:scale(1,1);         transform:scale(1,1);         -moz-transition-delay:0.3s;         -webkit-transition-delay:0.3s;         -o-transition-delay:0.3s;         -ms-transition-delay:0.3s;         transition-delay:0.3s;     }

why css have margin-top set? not pushing down icon? try commenting out , see if changes icon's position. if does, reduce margin-top , should bring icon place.

.info>i { font-size:1.7em;  /* margin-top:15px; */  color:#000;  margin-bottom:5px;  }

Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more