I have a bouncing down-arrow and want to hide it when I reach the footer after scrolling down, and show it again when I scroll back to the top. How can I do that without any JavaScript?
.bounce {
position: fixed;
left: 95%;
bottom: 0;
margin-top: -25px;
margin-left: -25px;
height: 50px;
width: 50px;
background: #65C178;
background-size: contain;
opacity: 0.8;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
-webkit-animation: bounce 1s infinite;
-webkit-overflow-scrolling: touch -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 750ms ease-in-out;
-ms-transition: all 750ms ease-in-out;
-o-transition: all 750ms ease-in-out;
transition: all 750ms ease-in-out;
overflow: hidden
}
#-webkit-keyframes bounce {
0% {
bottom: 5px;
}
25%, 75% {
bottom: 15px;
}
50% {
bottom: 20px;
}
100% {
bottom: 0;
}
}
<div class="bounce"></div>
as far as i know there is no css-only solution. you'll need javascript to determine the scroll position. The only CSSonly way i could think of, is to put the footer in front of the arrow (with z-index). so it gets hidden behind it.
Related
I'm trying to change a div opacity depending on having the class active or not.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
Follows my CSS code:
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
Thank you
[EDIT]
One of the problems was that I change the css property to "block" and "none". The other was solve by the answer choosen.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
You need to combine the classes like so.
As it was you have .highlight as a child of .active.
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
.high-light.active {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
The problem here is not the transition, it's the height 100% which is not taking effect because the parent element (body) is not tall 100%.
$('button').on('click', function(e) {
$("#multicanvasArea").toggleClass('active');
})
.high-light{
position: fixed;
width: 100%;
height: 30px;
top: 0;
background-color: black;
opacity:0;
left: 0;
color: white;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multicanvasArea">
<p class="high-light">Highlight</p>
<p class="">Other text</p>
</div>
<button>Toggle class</button>
Your code was 95% there, just a few tweaks I made seem to do the trick. Here is the new css:
#multicanvasArea .high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
Here is a link to a pen with a working example:
http://codepen.io/anon/pen/pEjrJo
this is a working example. The Javascript is only to toggle the class.
.box {
width: 200px;
height: 200px;
background: pink;
opacity: 0;
transition: opacity 3s linear;
&.active {
opacity: 1;
}
}
https://plnkr.co/edit/RZRygZieCUMVWiOVEJR8?p=preview
http://jasperalani.com/
If you hover over the logo at the bottom left of the page it becomes super pixelated when you hover over it.
I am using
transform: rotate(360deg);
How can I fix this so it maintains its quality?
That's because you are making you image to transform:rotate(360deg);, instead of that target you parent element .socialmedia and try it works.
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
<div class="socialmedia">
<a href="https://ello.co/jasperalani">
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
</a>
</div>
This is a known problem on Google Chrome.
Usually, you can overcome the problem by adding -webkit-backface-visibility: hidden to your element you rotate. In your example it will remove the anti aliasing entirely, though.
This is, because you are using transition instead of transform, so to fix the problem you rather add outline: 1px solid transparent to the CSS of your image. This will solve the problem.
img {
width: 21px;
height: 21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
outline: 1px solid transparent;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
I am trying to build menu bar for my first website. On the window resolution of 1280x800 menu is seen properly. However, when scaling it down, Menu starts aligning incorrectly.
HTML:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}"/>
<div class="menu">
Buy Cherry
</div>
CSS:
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: fixed;
top: 0%;
left: 0%;
right: 0%;
background-image: url('http://i.imgur.com/kMdEoP6.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('http://i.imgur.com/7d2V63b.png');
width: 249px;
height: 55px;
}
.shopbtn {
position: fixed;
font-size: 12pt;
right: 10%;
left: 23%;
top: 5%;
white-space: nowrap;
color: black;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
float: right;
}
.shopbtn:hover {
color: darkred;
I have tried adding margin-left and margin-right with auto statement on all the elements, but the menu would mess up and still would go incorrectly when resized.
What is solution for keeping navigator proper when scaled? Is there any layout that could solve the problem? Can this be done without use of Javascript?
Just remove position fixed from both logo and shopbtn and add float left as below,
.logo {
float:left;
}
.shopbtn {
background:#666666;
float:left;
margin:20px;
}
Now adjust your padding and margin accordingly.
You can add min-width to the <body> tag and set your desired width size. It can help maintain your page size whenever you try to scale it down.
body {
background-color: lightgrey;
min-width: 800px;
}
Edit: Try changing your .logo's position to relative.
body {
background-color: lightgrey;
}
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}
.logo {
position: relative;
top: 0%;
left: 0%;
right: 0%;
background-image: url('images/logo.png');
width: 250px;
height: 55px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.logo:hover {
background-image: url('images/logohover.png');
width: 249px;
height: 55px;
}
<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}" />
<div class="menu">
Logo
Buy Cherry
</div>
Update: Change the .logo's position to relative. Maybe this is the one that you are looking for.
I'm trying to create a hover button using the following code and it works relatively okay in all browsers except Chrome:
<div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated">
<a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/">
<img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png">
</a>
</div>
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
background-color: #6d8e3b;
color: #fff;
content: "Learn More";
display: block;
font-size: 12px;
margin-left: auto;
margin-right: auto;
opacity: .9 !important;
padding: 18px;
position: relative;
top: 20em;
width: 70px;
z-index: 2;
margin-top: -3em;
}
For some reason, Chrome won't let you hover over the button without it glitching out and flickering super badly. Is there an easy way around this without having to add in a separate button?
Live Page: http://vina.typesetdesign.com/wines/varietal/
Fiddle: https://jsfiddle.net/35txpy8v/
It's flickering because the element moves while you hover over it. The reason the element is moving is because of the pseudo element's positioning. To work around this, I'd suggest absolutely positioning the pseudo element relative to the parent element. In doing so, the pseudo element's position won't have any effect on the parent element.
Updated Example
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
content: "Learn More";
background-color: #6d8e3b;
position: absolute;
top: 50%;
margin-top: -50px;
color: #fff;
font-size: 12px;
opacity: .9;
padding: 18px;
width: 70px;
z-index: 2;
}
I am new to css and html and have a very small question. I am trying to add a opacity transition to description of an image when mouse hovers over. But it's currently not working and I am not sure why.
code:http://jsfiddle.net/3VHvM/
my html code:
<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/>
<div class = "img-overlay">
<h3>Typography</h3></div>
</div>
my css code:
.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
}
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}
.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}
.bucket img {
width: 100%;
}
Thank you for your help
1/20th of a second is too fast to see the effect. Try 2s instead.
http://jsfiddle.net/3VHvM/1/
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 2s;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
}
it's working - just too fast for eye to see, you need to decrees the transition speed, try 1s.
this option sets how long will take to the animation to run, 0.05s (s=seconds) it much to fast.
here:
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
your code is correct. Just the time is too less. try 0.5 sec. you will see the output.
The transition may not even be noticeable unless its .5s or slower. Quentin is right .2s is the fastest that it is noticeable if you're looking for it but if you want a viewer to pay attention to it, you should consider going even slower.