jquery - Need help adding caption with arrow over a div on mouseover event -

-

regarding hover effect, pelase check site http://www.rokivo.com/

i want such effect include headings,buttons , div in mysite.

thanks in advance

<div class="col-xs-12"> <a href="enquiry.html"><h3 class="orange2 pull-right contact-head">enquiry<br/><i class="fa fa-arrow-right black arrow4 pull-left"></i></h3></a> </div>

i used jquery add css transition class on mouseenter , remove class on mouseleave looks odd. want similar effect in referral url above.

it sounds didn't want have arrow sliding infinitely removed infinite added longer arrow (fa-long-arrow-right) since mentioned "long arrow" in comments.

i added forwards arrow stay @ end position of animation , not go beginning. animation-fill-mode

.contact-head{  	font-size:17px !important;  	padding:15px !important;  	border:2px solid #555 !important;  	border-bottom:5px solid #ffc000 !important;  	min-width:270px;  	max-width:270px;  }      @-webkit-keyframes arrow-jump3 {    0%   { opacity: 0;    -webkit-transform: translatex(25px);          -moz-transform: translatex(25px);          -0-transform: translatex(25px);          transform: translatex(25px);    }    100% { opacity: 1;            -webkit-transform: translatex(160px);          -moz-transform: translatex(160px);          -0-transform: translatex(160px);          transform: translatex(160px);      }   }  .arrow4 {    -webkit-animation: arrow-jump3 1s forwards; /* safari 4+ */    -moz-animation:    arrow-jump3 1s forwards; /* fx 5+ */    -o-animation:      arrow-jump3 1s forwards; /* opera 12+ */    animation:         arrow-jump3 1s forwards; /* ie 10+, fx 29+ */     }  .contact-head i{  	 display:none;  }  .contact-head:hover > i{  margin-top:10px;	  display:block;  }	  .contact-head:hover{  	background:#ffc000 !important;  	color:#000 !important;  	border-bottom:2px solid #555 !important;  }    .contact h3{  	margin:20px 0px 20px 0px;  	font-size:19px;  }  a{    text-decoration:none;  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>  <div class="col-xs-12">	<a href="enquiry.html"><h3 class="orange2 pull-right contact-head">enquiry<br/><i class="fa fa-long-arrow-right black arrow4 pull-left"></i></h3></a> </div>  	<div class="col-xs-12">	<a href="servicecall.html"><h3 class="orange2 pull-right contact-head">register service call<br/><i class="fa fa-long-arrow-right black arrow4 pull-left"></i></h3></a> </div>  	<div class="col-xs-12">	<a href="feedback.html"><h3 class="orange2 pull-right contact-head">customer feedback<br/><i class="fa fa-long-arrow-right black arrow4 pull-left"></i></h3></a> </div>

codepen

hope helps. luck.

ps. codepen (arrow) wasn't working because didn't include font awesome css. got click on cog icon , include externals there.

since asked me @ website tried way saw it. might have tweek little bit needs part should give idea of how accomplish goal. didn't feel there need use keyframes used simple transitions on hover. when hover on parent can target child , have child transition. hope understand.

*,  *:after,  *:before{    box-sizing:border-box;  }    .box{    position: relative;    width: 200px;    height: 300px;    background: #eee;    border-bottom: 5px solid #45ca58;    transition: .5s ease;    margin: 0 auto;     overflow: hidden;  }  .border{    width: 100%;    height: 40px;    display: inline-block;    background: #45ca58;    position: absolute;    bottom: -40px;    transition: .5s ease;  }  /*on hover target border element should move*/  .box:hover > .border{    position: absolute;    bottom: 0px;  }  .arrow{    position: absolute;    bottom: 10px;    left:-20px;    color:white;    transition: .5s ease-in-out;  }  .box:hover > .arrow{    left: 30px;  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>  <div class = "box">    <span class = "border"></span>    <span class="arrow"><i class="fa fa-long-arrow-right"></i></span>  </div>


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more

erlang - Saving a digraph to mnesia is hindered because of its side-effects -

-
updated the digraph library in erlang implements data type side-effectful. each operation on data type saves new state in ets table -- instead of returning altered version of itself, more common in functional languages. the problem usage perspective, impedes effort store or pass around state in convenient way requiring me first "collect" state before can start juggle around. the closest solution have seen far serializer/deserializer , these have drawback tied current structure of digraphs instead of operating on abstract type -- prevents future proof solution. update pascal pointed out serializer utilizes interface of digraph, , hence eliminates drawback mentioned above. better, albeit still inconvenient, see no better alternative. what recommendation on how store digraphs? should go different data type altogether? thanks. i not sure understand concern. fact digraph stored in ets transparent in user interface, might want chnge either exchange digr...
Read more