Currently I'm developing a simple website on which a experiment a lot with modern CSS techniques like animations and transition. But after implementing some carefully planned animations, suddenly my body texts aren't selectable anymore. I think some element is masking the text, but I can't find it. If anyone could point me in the right direction it would help me a lot.
You can check the dev version on the-outsiders.nl, below is a snippet of the sass I'm using.
Thx in advance!
.slider {
position: absolute;
top: 0;
left: 0;
z-index: -1;
margin: 0;
li {
span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 1;
z-index: -1;
#include animation(0s, 25s, imageAnimation);
}
div {
z-index: 1;
position: absolute;
bottom: 30px;
right: 0px;
min-width: 20em;
text-align: left;
opacity: 1;
color: #fff;
#include animation(0s, 25s, titleAnimation);
}
}
}
.slider,
.slider:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
#include keyframe(imageAnimation) {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; #include transform(scale(1.025)); animation-timing-function: ease-out; }
100% { opacity: 1; #include transform(scale(1.15)); animation-timing-function: ease-out; }
}
#include keyframe(titleAnimation) {
0% { opacity: 0 }
17% { opacity: 1 }
}
slider has z-index: -1; in two places.
Once you take out those two z-index, you should be able to select the bottom text.
I am having a hard time determining what you are asking. But if you are concerned that one control is masking another, you can determine if another element is masking your input by setting the background color of the potential overlaying item to something like bright green. It should then be obvious when something is on top of something else.
Related
I made a CSS3 animation, it works well in Firefox and Chrome, but it behaves differently in IE11 and Edge.
I couldn't fix the issue because it's hard to debug CSS3 Animation using IE Developer Tools. This issue also occurs on Edge (But i think my Edge version is outdated so please try to reproduce this issue only in IE11. The fix will probably work on both).
Here is how i want the animation to look (Works on Chrome/Firefox):
Here is how it animates differently on IE11:
Code:
HTML:
<div class="block"></div>
<span>click</span>
CSS:
span {
width: 50px;
height: 50px;
background: red;
font-size: 50px;
}
.block {
position: fixed;
height: 0%;
bottom: 0;
width: 100%;
top: auto;
display: block;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
.animate-up {
animation-name: overlayEffectUp;
}
#keyframes overlayEffectUp {
0% {
bottom: 0;
top: auto;
height: 0%;
}
35%,
65% {
height: 100%;
}
100% {
bottom: auto;
top: 0;
height: 0%;
}
}
JavaScript (With jQuery):
$('span').on('click', function() {
$('.block').addClass('animate-up')
})
Here is the Demo link: https://jsfiddle.net/zoq9h7xp/3/
Please, any help would be appreciated!
Edge seems to be buggy with position: fixed. Supposedly the switch between top: 0 and top: auto (and same story with the bottom property) causes this behaviour.
If you must maintain the fixed position, you can try to animate with the transform property. Change your rulesets as follow:
#keyframes overlayEffectUp {
0% {
transform: translateY(100%); // totally offscreen
}
35%,
65% {
transform: translateY(0%); // totally on screen from bottom
}
100% {
transform: translateY(-100%); // totally off screen again to top
}
}
.block {
position: fixed;
top:0;
bottom:0;
transform: translateY(100%);
width: 100%;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
Hope this helps.
Cheers, Jeroen
I have animation with using transform:translate(-100%) and transition, but when i load page my block is moving from 0% to -100%;
in normal condition she have to have transform:translate(-100%) and when checkbox is checked - transform:translate(0%)
It works well but on load is moving from o to -100%
https://katehrybkova.github.io/ETmenu/index.html - link on github-page
https://github.com/katehrybkova/ETmenu - source
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
position: absolute;
transform: translateX(-100%);
transition: 1s;
}
#idishka:checked~.menuBlock {
transform: translateX(0);
}
The animation starts with .menuBlock at left: 0, that's why transform: translateX(-100%) starts fading it to the left.
Maybe you can replace translateX function with left, because you have .menuBlock with fixed width.
This is the final code:
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
transition: 1s;
position: absolute;
left: -400px;
}
#idishka:checked ~ .menuBlock {
left: 0;
}
I don't recommend you using fixed widths (in pixels), for responsivity issues ;)
I'm trying to get the 'previous' and 'next' arrows of this pure css slider to "fade in" into a teal blue when people hover over it with their mouse (or when they tap on the arrows in the mobile version) since the default dark grey arrows don't show up that well in some photos. I've already prepared the teal blue image file, so it's just a matter of getting the hover and fade in css animation to work.
Here is a webpage that has the css slider:
http://melodywai.com/sodium.html
And here is a snippet of the CSS stylesheet that relates to the arrows:
.carousel-wrapper { position: relative; }
.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
height: 500px;
width: 750px;
margin-left: auto;
margin-right: auto;
}
.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 50px;
background: url("../prev.png") no-repeat;
z-index:999;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; }
.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I'm looking for suggestions on which class to target, or if, for some reason, hovers really can't work on this slider.
Thanks!
try adding
.carousel-wrapper .carousel-item .arrow:hover{
//do something
}
you can target them this way.
a.arrow.arrow-prev:hover {
}
a.arrow.arrow-next:hover {
}
to achieve this you must design the teal blue arrows with photoshop and on hover change the background image of the arrow container, for example:
a.arrow.arrow-prev:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-prev.png"); // to change the arrow img
}
a.arrow.arrow-next:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-next.png"); // to change the arrow img
}
this is a simple solution and it will look good with the transition effect.
Tell me if this helps you or you need more suggestions
Using the second answer found here. I combined my images into a sprite and then updated my CSS to reflect the keyframes element like in the example provided. The sprite image (castle) shows up but the slide effect does not take place? What am I missing?
Sample URL, center element on home page: http://216.157.26.175/cookiedouglas/
Here is my CSS:
.agentpress-pro-cookie .home-featured .widget {
/* background-color: rgba(255, 255, 255, 0.8); */
background: url("http://216.157.26.175/cookiedouglas/wp-content/uploads/sites/58/2015/05/fort-myers-homes-for-sale.jpg");
opacity: 0.95;
content: '';
/* position: absolute;
width: 400%;
height: 100%; */
z-index: -1;
/* background: url(http://placekitten.com/500/500/); Image is 500px by 500px, but only 200px by 50px is showing. */
animation: slide 3s infinite;
}
#keyframes slide {
20% {
left: 0;
}
40%, 60% {
left: -50%;
}
80%, 100% {
left: -100%;
}
}
Use browser (vendor) specific prefixes.
Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.
CSS3 animation is one of those features. It has partial support across different browsers. Browser support for CSS3 animations can be checked here.
As evident from the above link, to make the animation work on browsers other than IE and Firefox, you meed the -webkit- prefix.
Also, CSS left propery works only with absolutely positioned elements.
So you should try something like this (read added comments in snippet for explanation):
/*visible portion of the larger 5120x680 pixel image*/
.widget {
width: 1024px;
height: 680px;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.widget:before {
content: '';
position: absolute;
/*needed for CSS left property to work*/
width: 5120px;
height: 680px;
z-index: -1;
/*ExampleImageSprite.jpg is a 5120x680 pixel image which is a combination of 5 individual 1024x680 pixel images*/
background: url("https://dl.dropboxusercontent.com/u/192824325/00_sandbox/30150865/ExampleImageSprite.jpg");
-webkit-animation: slide 10s infinite;
animation: slide 10s infinite;
}
#-webkit-keyframes slide {
0% {
left: 0px;
}
20% {
left: -1024px;
}
40% {
left: -2048px;
}
60% {
left: -3072px;
}
80% {
left: -4096px;
}
100% {
left: -5120px;
}
}
#keyframes slide {
0% {
left: 0px;
}
20% {
left: -1024px;
}
40% {
left: -2048px;
}
60% {
left: -3072px;
}
80% {
left: -4096px;
}
100% {
left: -5120px;
}
}
<div class=widget></div>
I am working on a little CSS3 menu.
Live example here: http://jsfiddle.net/e592S/
(the code is full is very long)
/*Fifth Box*/
#-webkit-keyframes myFifth {
0% {
right: 300px;
top: 13px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
right: 300px;
top: 63px;
opacity: 1;
}
}
#box.box5 {
top: 113px;
}
#littlebox5 {
top: 053px;
position: relative;
}
#bothcontaine5:hover ~ .box5 {
-webkit-transition: all 0s;
right: 300px;
top: 63px;
-webkit-animation: myFifth .75s;
-webkit-animation-fill-mode: initial;
opacity: 1;
background: #909090;
right: 300px;
-webkit-animation-fill-mode: initial;
}
#bothcontainer5:hover .littlebox-sentence {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0F2F9), to(#84CEFB));
}
#bothcontainer5:hover .triangle {
border-right: 20px solid #909090;
}
the problem is that the fourth and the fifth doesn't work, (the code is completly the same). the first second third boxes works fine.
My quastion is how can I solve this problem so all the boxes will work?
Wish for help. Thank
didn't quite figure what the problem was but as #rob said you had, and maybe still have html errors, like multiple id's, when id's must be unique in the DOM, also for your own sanity when trying to debug you should try to DRY in your code
the same animation can be applied to all the boxes, you don't have to repeat it for example.
What i did was refactor your code step by step starting with the id's
<div class="box3 box">
corrected code : http://jsfiddle.net/e592S/1/
An 'id' must be unique to one element on a page. Did not test to see if this is the problem. See if making that a 'class' name solves it.