I have a class over thumbnails called toolbar and I move it to the top on mouse over.
li .toolbar {
position:absolute;
top:10px;
right:0;
left:0;
overflow:hidden;
height:24px;
padding:0 10px;
color: #fff;
-webkit-transition:top .3s;
-moz-transition:top .3s;
-o-transition:top .3s;
transition:top .3s;
}
li:hover .toolbar{
top:-20px;
}
So when I move it 20 pixels to the top I also want to hide it without using z-index.
Is there any way with jQuery or pure CSS to do this?
Thank you
You can use opacity to hide the toolbar and set transition delay to make it start after a specific time
see code snippet
.li {
position: relative;
border: 1px solid #000;
height: 100px;
}
.li .toolbar {
position: absolute;
top: 10px;
right: 0;
left: 0;
overflow: hidden;
height: 24px;
width: 24px;
padding: 0 10px;
color: #fff;
background: red;
transition: top .3s .3s, opacity .3s;
}
.li:hover .toolbar {
transition: top .3s, opacity .3s .3s;
top: -20px;
opacity: 0;
}
}
<div class="li">
<div class="toolbar"></div>
</div>
You can use jQuery animation chaining.
$('.toolbar').animate({top:-20},1000).animate({'z-index': 0},1000).animate({opacity:0});
So to clarify: Each animation is happening after the last animation finishes.
Example on jsfiddle. You can see how z-index animation is working after the top animation and before opacity animation.
Related
thanks for visiting.
I need to know how can I add in my back-to-top button a "text" saying:
"Back to top" or similar.
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
body {
width:100%;
height:1200px;
background-color:#242424;
margin:0;
padding:0;
}
body > div {
width:100%;
height:75px;
background-color:#393939;
text-align:center;
position:fixed;
}
.text {
font-size:40px;
color:white;
line-height:75px;
}
.cd-container {
width: 90%;
max-width: 768px;
margin: 2em auto;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
.cd-top {
display: inline-block;
height: 40px;
width: 80px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
color:#1769ff;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div>
<span class="text"> Scrolldown.</span>
</div>
BackToToP
<!-- Im using Back to Top from here:
https://codyhouse.co/demo/back-to-top/index.html
-->
</body>
</html>
If you see, I add "BackToTop" text but nothing happend.
I tried using different ways but I dont know how.
Thanks.
You must remove text-indent: 100%.
That will push the text back to it's original position.
EDIT:
If you then want the text to be next to the arrow you can do something like this:
.cd-top {
text-indent: 0;
width: auto;
line-height: 40px;
text-decoration: none;
font-family: Arial;
color: #FFF;
padding: 0 50px 0 20px;
background-position: right 20px center;
}
Combined with your code:
.cd-top {
display: inline-block;
height: 40px;
line-height: 40px;
width: auto;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
font-family: Arial;
text-indent: 0;
text-decoration: none;
color: #FFF;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat right 20px center;
padding: 0 50px 0 20px;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
The css property 'text-indent' is the one giving you the issue. Remove it and you will see the text. A good way to debug this kind of stuff is using developer tools and then inspecting the element.
I'm a beginner to jquery. I want to make a simple fadeindown when I click a button, but from the above the screen,e.g. minus top value. But what I get is only sliding in the page, not from above. And it only works once when I load the html. After that, opacity is the only one working. Here's the sample code:
#Page {
opacity: 0;
width:70%;
min-height: 300px;
background:white;
text-align: center;
border-radius: 20px;
position:relative;
padding:20px;
margin:0 auto;
}
in document.ready(), when I load the html
$("#Page").position().top=$("#Page").outerHeight()*-1;
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500);
and the .click function
$("#Page").css('opacity','0');
$("#Page").position().top=$("#Page").outerHeight()*-1;
$("#Page").animate({top:$(".row").outerHeight(),opacity:'1'},1500);
it seems only in document.ready that my fadeindown works. Anyone know the reason?
N.B: I try it only in my browser,not hosting it,not even at localhost
Just use css:
#Page {
position: relative;
top: 0;
opacity: 1;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
}
.hidden-element {
position: relative;
top: -100px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
And then JQuery to hide element:
$("#Page").addClass('hidden-element');
And to show:
$("#Page").removeClass('hidden-element');
I am trying to create a simple full page overlay with bootstrap.
However the overlay is appearing 'behind' my main content (a blue box in the example).
I'm sure I am missing something very obvious however any help would be appreciated.
I need to overlay to disappear when the page is clicked anywhere, this is working.
I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?
HTML
<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>
<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>
JS
$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});
$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});
CSS
.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}
Specify the z-index in your css to be greater than your main content.
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
}
JSFiddle
Read more about it at MDN, z-index.
Use z-index to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}
I have created a transition effect on a div. I have written the following code and its working fine, when I hover on the div, the color smoothly changes, but when I remove the mouse the color backs to its original state abruptly.
I want to know the method of changing the color slowly on Mouse out Event as well.
Kindly check my code and guide me.
<nav>
<ul>
<li id="skills" class="navText" >Work -Experience</li>
<li id="web" class="navText">Skills </li>
</ul>
</nav>
CSS
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
It is changing back suddenly because you have the transitions in the :hover rule. The transitions only works when the mouse is over the element.
Do it like this instead:
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}
See? The transitions are applied only when the mouse is over the element because it is in the :hover rule. Thus, it cannot fade back out after the mouse leaves because the transitions are no longer applied. If the transitions are applied to the elements style, it will fade in and out every time the mouse moves over it.
Here is a JSFiddle to show what I mean.
Hope this helps!
It should work if you only have transition on the non-hovered element, according to CSS-tricks
av ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}
I'm trying to create an effect like the right nav on this site:
http://dianabobar.com/
With jQuery. The way the color opens up from the middle is the effect I'm going for but unfortunately that site is done in Flash so I don't have the option of studying how it's done. I'm not really sure what to search for. I was thinking something like 'background radial animation jquery' or 'background color animation from center jquery.'
I also considered a CSS3 ease-in like they've detailed here (Expand background from center (CSS / Javascript)). The problem is that the answer on this question is only showing the CSS3 transition working horizontal when I'll need it to work vertically. I've worked with the JSFiddle that they were using on the answer (http://jsfiddle.net/SNzgs/) but I can only seem to get the transition to animate going down from the top and not out from the center. The code they have is:
.redline {background:red;height:10px;width:0;margin:auto;}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
The code I tried was:
.redline {background:red;height:0px;width:10px;margin:auto;}
.container:hover .redline {
height:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
Thanks for your help!
My solution is similar to that of by matewka, but uses both :before and :after pseudo-elements. The example markup is as follow:
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
For the CSS:
nav ul {
list-style: none;
width: 6em;
}
nav ul li {
background-color: #eee;
position: relative;
}
nav ul li:before,
nav ul li:after {
background-color: #333;
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%; /* Vertically positions pseudo elements in the center */
bottom: 50%; /* Vertically positions pseudo elements in the center */
transition: all .125s ease-in-out;
z-index: 50;
}
nav ul li a {
color: #333;
display: block;
padding: .5em 1em;
position: relative;
z-index: 100;
transition: all .125s ease-in-out;
}
nav ul li a:hover {
color: #eee;
}
nav ul li:hover:before {
top: 0; /* Forces :before to stretch to fill top half */
}
nav ul li:hover:after {
bottom: 0; /* Forces :after to stretch to fill bottom half */
}
http://jsfiddle.net/teddyrised/rRtmB/
You can easily do it with :after pseudo element and absolute positioning. Then you can combine height and top properties of that shading box.
I made a completely new fiddle: http://jsfiddle.net/SNzgs/5/ since yours was built to do the job horizontaly.
.container:after {
content: "";
display: block;
background: #ccc;
width: 100%;
height: 0;
top: 0.5em;
position: absolute;
left: 0;
transition: all 1s ease-out;
}
.container:hover:after {
top: 0;
height: 100%;
}
You can use the :after pseudo element to create the animating background:
CSS
ul {
margin: 0;
padding: 0;
}
ul > li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul > li > a {
display: block;
padding: 10px;
color: #000000;
text-decoration: none;
position: relative;
z-index: 10;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover > a {
color: #ffffff;
}
ul > li:after {
content: " ";
position: absolute;
top: 50%;
bottom: 50%;
left: 0;
right: 0;
background: #353535;
z-index: 0;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover:after {
top: 0;
bottom: 0;
}
HTML
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
Demo
This works (though I'm not sure this is exactly what you want):
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:0;}
.redline {background:red;height:0;width:200px;margin:auto; top:5px;position:relative;}
.container:hover .redline {
height:10px;
top: 0px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
You can recreate a similar effect with few modifications at your fiddle:
<div class="container">
<span class="vertgrey">
<span class="vertredline"></span>
</span>
<span class="greyline">
<span class="redline"></span>
</span>
</div>
and the css:
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.redline, .vertredline {background:red;height:10px;width:0;margin:auto;}
.vertgrey {
background: #CCC;
height: 100%;
position: absolute;
width: 10px;
left: 90px;
}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.container:hover .vertredline {
height:100%;
width: 10px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
This is the link to the updated fiddle: http://jsfiddle.net/SNzgs/4/
Here's my shot at a solution for you:
fiddle: http://jsfiddle.net/itsmikem/gF28Y/
css:
.container {height:100px;width:200px;background:#eee;position:absolute;}
.greyline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:50px;}
.container:hover .redline {
margin-top:0px;
height:100px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
html:
<div class="container">
<div class="greyline">
<div class="redline"></div>
</div>
</div>