I am trying to get it so that when you hover over the box the '^' will animate upwards. Currently it gets to the right position on the over state but it does not apply the css transistion.
jsFiddle: http://jsfiddle.net/9f9fyaj2/
HTML:
<a href="#">
<div class="scrollToTop">
<i>^</i>
</div>
</a>
CSS:
body{
background: #7A7A7A;
}
.scrollToTop{
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.5);
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
}
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .02s ease-out;
-moz-transition: top .02s ease-out;
-ms-transition: top .02s ease-out;
-o-transition: top .02s ease-out;
transition: top .02s ease-out;
}
.scrollToTop:hover i{
top:-20px;
}
.scrollToTop:hover{
background: rgba(0,0,0,1);
}
your transition is working well and good.
Just increase the time given for the transition.
Like This:
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .5s ease-out;
-moz-transition: top .5s ease-out;
-ms-transition: top .5s ease-out;
-o-transition: top .5s ease-out;
transition: top .5s ease-out;
}
Related
So I have a sticky bar and when it becomes fixed it has a little animation with before and after elements.
This works fine on Chrome but its slightly glitchy on firefox.
The site is live the link is:
http://pixelfriendlytech.co.za/
Simple demo is here:
https://jsfiddle.net/zr8gc1f7/4/
Here is the css:
#pf-bar{padding: 0px;
z-index: 1000;
top:0;
left: 0;
right: 0;
position: relative;
max-width: 2560px;}
#pf-bar:before {
content: "";
position: absolute;
top: 0;
right: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #2484C6;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}
#pf-bar:after {
content: "";
position: absolute;''
top: 0;
left: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #F72244;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}
.sticky #pf-bar:before {
width: calc(50% - 570px);}
.sticky #pf-bar:after {
width: calc(50% - 570px);}
.sticky #pf-bar{
position: fixed;
width: 100%;
box-shadow: 0px 4px 10px rgba(0,0,0,.2);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;'}
Basically i have 2 columns and the left side has an overlaying grey image to create a kind of blur effect. When you mouseover it, it will turn see-through. It works well in Chrome/Safari but not in Firefox and i can't really figure out why.
I uploaded a link to my site to show what i mean:
http://generowicz.nl/showing_template.html
When viewed in Firefox the overlaying image doesnt fit and overlay the whole left side.
html, body {
height: 100%;
margin: 0;
font-size: 15px;
font-family: Helvetica;
font-weight: lighter;
}
#left{
text-indent:1cm;
width: 20%;
height: 100%;
position: fixed;
background: rgba(51,51,51,1);
}
#right {
padding-top:2cm;
width: 80%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
position: absolute;
opacity: 0.4;
width:100%;
height:100%;
pointer-events:none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color:#000;
}
#left:hover>#img {
opacity: 0;
}
h1{
font-size: 80px;
color:#CCC;
}
h2 {
font-size: 15px;
color: #CCC;
font-weight: lighter;
}
h3 {
font-size: 15px;
color:#CCC;
}
/* These are for main body */
h4 {
font-size: 15px;
color:#000;
}
h5 {
font-size: 15px;
color:#000;
font-weight: lighter;
}
a.one:link {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
a.one:link:hover {
text-decoration: none;
color: #09F;
}
a.one:visited {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
a.one:visited:hover {
text-decoration: none;
color: #09F;
}
a.one:active { text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
<body>
<div id="left"><img src="images/graysmall.png" name="img" width="93" height="55" id="img" />
<h1> B </h1>
<h2><a class="one" href="../index.html">Home</a></h2>
<h2><a class="one" href="../about.html">About Me</a></h2>
<h2><a class="one" href="../contact.html">Contact</a></h2>
</div>
<div id="right">
<table width="100%" border="0" align="left">
<tr>
<td width="5%"> </td>
<td width="95%" align="left" valign="top">
<!-- TemplateBeginEditable name="Content" -->
<!-- TemplateEndEditable -->
</td>
</tr>
</table>
</div>
</body>
Adding left:0 in your #img class will give the result you need. See the updated class below,
#img {
position: absolute;
opacity: 0.4;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}
Because you have not commented these lines Saf3.2+, Chrome , FF4+ etc
-webkit-transition: all 0.5s ease-out; /* Saf3.2+, Chrome all these text should be comment*/
-moz-transition: all 0.5s ease-out; /* FF4+ */
-ms-transition: all 0.5s ease-out; /* IE10 */
-o-transition: all 0.5s ease-out; /* Opera 10.5+ */
transition: all 0.5s ease-out;
"Solution" Edit: I ended up just changing the layout a bit to get around this issue, as shown below. The original problematic behavior was present in other browsers as well, so I simply kept the button in place instead of sliding it to the left upon opening the search box.
--------- Original Question ---------
I wasn't sure how to word my title, but let me explain my issue. Using pure CSS and HTML, I'm making an expanding search box. The problem I have is when closing the search box, if you don't move your mouse, the button will still be shown as hovered, even though it has moved. Here is my problem:
What can I do to prevent this, if possible? It just messes with the look of the animation even if you move off of it when you click. The animation is smoother than shown. Using latest Chrome on W7.
CSS:
div#nav-search {
display: inline-block;
height: 34px;
float: right;
font-size: 0;
width: 60px;
position: absolute;
top: 43px;
right: 0;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
nav#header-nav.small div#nav-search {
top: 18px;
}
div#nav-search.open {
background-color: #FFBC43;
width: 95%;
}
div#nav-search-wrapper {
display: inline-block;
vertical-align: top;
height: 34px;
width: calc(100% - 60px);
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn {
display: inline-block;
height: 34px;
width: 60px;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
margin: 0;
padding: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button#nav-search-btn span {
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
-o-transform: skew(45deg);
display: block;
width: 100%;
height: 100%;
background-image: url({{ 'search-gold.png' | asset_url }});
background-size: 24px;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
button#nav-search-btn:hover {
background-color: #FFBC43;
}
button#nav-search-btn:hover > span, div#nav-search.open > button#nav-search-btn span {
background-image: url({{ 'search-brown.png' | asset_url }});
}
HTML:
<div class="nav-right transition">
<span class="phone-number">{{ settings.company_phone }}</span>
<div id="nav-search">
<button id="nav-search-btn"><span></span></button>
<div id="nav-search-wrapper">Wrapper filler text</div>
</div>
</div>
i have a problem, HTML elements are moving while animation, i have captured 2 pics to guess what i want...
Before animation:
http://i031.radikal.ru/1406/9a/41e9b81ddaed.png
After animation:
http://i057.radikal.ru/1406/1b/c5e3f763fd98.png
all i want is, that after "transition", elements stay on their line...
Here is some HTML and CSS code
HTML
<div id="sliderdiv">
<ul>
<li>
<div id="bullets">
<div class="bullet" id="bul1"></div>
<div class="bullet" id="bul2"></div>
<div class="bullet" id="bul3"></div>
<div class="bullet" id="bul4"></div>
<div class="bullet" id="bul5"></div>
</div>
</li>
<li>
<div id="sliderimages">
<img src="sliderimages/bilberry.png">
<img src="sliderimages/dogrose.png">
<img src="sliderimages/dryedbilberry.png">
<img src="sliderimages/dryeddogrose.png">
<img src="sliderimages/dryedherbs.png">
<img src="sliderimages/wildapple.png">
</div>
</li>
<li>
<div id="arrows">
<div id="slideup"></div>
<div id="slidedown"></div>
</div>
</li>
</ul>
CSS
#sliderdiv{
text-align: center;
padding-top: 40px;
height: 771px;
width: 100%;
}
#sliderimages{
overflow: hidden;
text-align: center;
height: 771px;
width: 1187px;
}
#sliderdiv ul li{
list-style: none;
display: inline-block;
}
#arrows{
width: 26px;
margin-left: 5px;
}
#slideup{
margin-bottom: 10px;
}
#slideup{
cursor: pointer;
width: 26px;
height: 18px;
background-image: url('slideup.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slideup:hover{
background-image: url('slideuph.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown{
cursor: pointer;
overflow: hidden;
margin-bottom: 380px;
width: 26px;
height: 18px;
background-image: url('slidedown.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown:hover{
background-image: url('slidedownh.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
.bullet{
position: relative;
background-color: #747474;
width: 10px;
height: 10px;
margin-bottom: 15px;
border-radius: 30px;
border: none;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child{
margin-bottom: 350px;
}
.bullet:hover{
border-left: 5px;
border: solid 5px #747474;
background-color: #eeeeee;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child:hover{
margin-bottom: 350px;
}
#bullets{
margin-right: 10px;
}
You can set initial value for border property to 5px solid #FFFFFF to .bullet selector. Assuming here color #FFFFFF is the background color of your page (so it looks transparent).
And when hovering over the bullets replace border shorthand property with single longhand property border-color: #747474; inside the pseudo selector :hover, while border-width and border-style will be inherited from the initial border value 5px and solid
DEMO
Try adding this to your classes:
.bullet{
position: relative;
}
.bullet:hover{
right: 5px;
top: -5px;
margin-bottom: 5px;
}
would you see guys. my each image bottom have one caption bar with title. but that not same height for all box. all i want it will same height in all box and if you rollover then you will see that box slideup that's fine. also it will resposive. i am still trying but can not figureout it. would you guess see where i mistake. i just want to make that perfect. even if you any other css or js like that with responsive support then post here please.
thanks
http://jsfiddle.net/BAVXH/
bellow is css for caption
.box {
float: left;
border: 1px solid #FFF;
margin: 2px;
position: relative;
overflow: hidden;
background-color: #F00;
}
.box img {
position:relative;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:96%;
}
.box:hover .caption {
-moz-transform: translateY(-89%);
-o-transform: translateY(-89%);
-webkit-transform: translateY(-89%);
opacity: 1;
transform: translateY(-89%);
}
You could use something like this with jQuery and calculate the top for each caption.
for(i=0;i<8;i++){
var h = $('.col-'+i).height();
$('.col-'+i).find(".caption").css("top",h-25 + "px");
}
Hope this gives you an idea.
put height in px not in % like
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:100px;
}