Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I found a nice codepen and started playing with it:
http://codepen.io/georgehastings/full/xgwxgo
The problem is that I can't seem to make the black background-color of my div appear so that the glowing stays BEHIND the div and not ontop of it.
My current situation:
http://codepen.io/anon/pen/xgavRb
What have I done wrong ?
I am looking for an effect similar to this:
http://assets.razerzone.com/eeimages/products/25594/firefly-cloth-tech-bg.jpg
You need to use another element instead of the :after, see this as an example:
body {
background: black;
}
.homeTitle {
z-index: 14;
position: relative;
text-align: center;
color: #252B37;
background-color: black;
color: white;
font-size: 50px;
margin-top: 20vh;
width: 100px;
margin-bottom: 7vh;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: gamers;
border-radius: 20px;
/* animation: textColor 10s ease infinite;*/
}
.homeTitleBack {
position: absolute;
content: "";
left: 40%;
top: 17px;
z-index: -1;
height: 47%;
width: 20%;
margin: auto;
transform: scale(0.75);
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background-size: 200% 200%;
animation: animateGlowing 10s ease infinite;
}
#keyframes animateGlowing {
0% {
background: #FF0000;
}
33% {
background: #7e0fff;
}
66% {
background: #0053FF;
}
100% {
background: #FF0000;
}
}
#keyframes textColor {
0% {
color: #7e0fff;
}
50% {
color: #0fffc1;
}
100% {
color: #7e0fff;
}
}
<div class="homeTitleBack"></div>
<div class="homeTitle">Test</div>
z-index of a child element will always be higher than the z-index of its parent, despite what you set in the CSS.
You can use a :before pseudo element in front of the :after pseudo element however.
Just use one div for the effect and another for the black box
<div class ="homeTitle">
<div style="background: black">Test</div>
</div>
Related
I am trying to create a curtain effect on some text. I want the text to be hidden at first and then have an animated reveal from the middle of the text to the outer edges. I want this to work even if there is an odd number of letters. In other words, breaking up the string would not work. If there is only one giant character in the string I want it to reveal from the center of the character to the outer edges of the character. I do not want a curtain effect on the background, since I don't know what I want to have for a background yet. I want it only on the text.
Here is what I have so far:
HTML
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
CSS
body {
margin: 0;
}
.container {
position: relative;
font-size: 3vh;
width: 100%;
height: 100vh;
background: lightblue;
}
.my-name {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
font-weight: bold;
color: darkblue;
width: 0;
overflow: hidden;
white-space: nowrap;
animation: showName 5s linear 3s forwards;
}
#keyframes showName {
from {
width: 0;
}
to {
width: 15ch;
}
}
The overflow:hidden and the width from 0 to 100 give me what I want in terms of the individual characters gradually being revealed instead of popping in like a typewriter. The problem is that it generates from the left to the right. Is there any way I can start expanding the width from the middle to the outer edges?
Firstly, you would need a keyframe to auto width which you can't do. I'd suggest rethinking your methodology.
I'd go with animating a clip path
body {
margin: 0;
}
.container {
position: relative;
font-size: 25vh;
width: 100%;
height: 100vh;
background: lightblue;
display:flex;
justify-content:center;
align-items:center;
}
.my-name {
font-weight: bold;
color: white;
overflow: hidden;
padding: .25em;
background: rebeccapurple;
clip-path: inset(0 100% 0 100%);
animation: showName 5s linear forwards;
}
#keyframes showName {
0% {
clip-path: inset(0 100% 0 100%);
}
100% {
clip-path: inset(0);
}
}
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 2 years ago.
First of all, I'm talking of background and not background-color. I looked around on stack-overflow but this solution but this is for images. Though I won't prefer creating an image of gradient and using this method. It might just blur up the original image as the image size would be variable.
The fade effect I want works with background-color but there seems no way to use linear-gradient in background color.
Here is my code:
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation-name: div-text-hover;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes div-text-hover {
0% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
100% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
When I hover my mouse on the DIV it should change the background to the above gradient with FADE effect.
But when I hover, the background changes instantly like this:
I want that background to fade-in slowly and not so sharply with pure CSS without Jquery or anything else. Just like when we use background-color
. I found no way to do this with background.
EDIT: I tried out adding #keyframes every 10% and it's still sharply changes opacity every frame. And it's not efficient to type of the same lines 60 times to get 60fps :-(
For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
position: relative;
z-index: 1;
overflow: hidden;
}
#div-text::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 1s ease;
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
opacity: 0;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
position: relative;
z-index: 3;
}
#div-text:hover::after{
opacity: 1;
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
I think, it will be helpful for you.
I am sure This will help You.I just changed the keyframe and place that linear-gradiant in hover section.
#keyframes div-text-hover {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
background-size: 400% 400%;
-webkit-animation: div-text-hover 2s ease infinite;
animation: div-text-hover 2s ease infinite;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
</body>
</html>
I also ran into same problem a while ago, and didn't get an answer. Turns out it is because background's linear gradient property is not animatable, just like background-img. There are some workarounds though:
Stack 2 gradients on top of each other and animate the opacity of the top one. This is given in detail here : https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
What I used is that create a gradient that is 2 times the width of screen and animate the position of the gradient.
I think in your code, the animation is working but your both the linear gradients have same values of color, hence you cant see it working. In short it is like changing gradient from white to white, which is working but there is no visual change.
Instead you can try this :-
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation: hover-animation 2s infinite ease-in;
}
#keyframes hover-animation{
0%{
background: #2d2e31;
}
100%{
background: linear-gradient(45deg,#36D8FF, #00acee, #66757f);
}
}
I too am a beginer so this is not a perfect code. So you might want to make changes to it.
And sorry if i have made any mistake.Let me know how it works out.
Thank you.
I have created this animated underline, but the bottom seems to sit still whilst everything else moves - making it look "laggy"
I created a codepen to illustrate the issue.
Do you have any idea why is this happening?
Codepen for illustration
<!DOCTYPE html>
<html>
<body>
<span class="divider-body">
<div class="divider-wave" data-text="dividerdivider"></div>
</span>
</body>
</html>
<style type="text/css">
.divider-body {
display: flex;
justify-content: center;
align-content: center;
margin: 0;
padding: 0;
}
.divider-wave {
width: 30%;
height: 10%;
background: white;
overflow: hidden;
}
.divider-wave:before {
content: attr(data-text);
position: relative;
top: -42px;
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: underline;
animation: animate 0.5s linear infinite;
}
#keyframes animate
{
0%
{
left: 0;
}
100%
{
left: -30px;
}
}
</style>
To fix the line issue (without regard to actual browser support), try to use the text-decoration-line: line-through; property and value. I changed the positioning for demonstration purpose.
.divider-body {
display: flex;
justify-content: center;
align-content: center;
margin: 0;
padding: 0;
position: relative;
}
.divider-wave {
width: 30%;
height: 10%;
background: white;
overflow: hidden;
}
.divider-wave:before {
content: attr(data-text);
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: line-through;
animation: animate 0.5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
100% {
left: -30px;
}
}
<div class="divider-body">
<span class="divider-wave" data-text="dividerdivider" />
</div>
I would also suggest swapping the span and div, since a span can only contain phrasing content, as described here. See a list of content categories here.
The text-decoration-style: wavy; doesn't have great support:
https://caniuse.com/#search=text%20decoration%20style%20wavy
I'd suggest doing this as a background image with background-repeat: repeat; and animate the background-position property.
Backgrounds will animate a lot smoother.
A short inspect shows that the line is moved back, which causes the problem. This happens on the left side as well, but by moving the line out of the container, it is no longer visible. The solution is simple; the width of the container should be the length of the line minus the moving distance of the line.
width: 1130px;
Visual: https://codepen.io/Toeffe3/pen/MWYqJyz
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>
I am trying to create the zoomIn effect like this page: Example Website
The top "mk" logo zooms in on page load.
I tried to copy the code and this is what I have so far but it's not working:
html:
<div id="header">
<div id="toplogo"><h1>PagesByZ:: Think Outside the Box</h1></div>
</div>
css:
#header {
width: 800px;
height: 80px;
animation: 0.4s ease-in-out 0s normal forwards 1 zoomIn;
}
#toplogo h1 {
margin: 0;
padding: 0;
}
#toplogo h1 a {
display: block;
width: 212px;
height: 80px;
margin: 20px 0 0;
background: url('http://www.interfaithmedical.com/pz/theImages/hdrLogo.png') no-repeat;
color: #fff;
font-size: 40px;
font-weight: 400;
outline: none;
text-indent: -10000px;
}
JDFiddle example: http://jsfiddle.net/n75rL/
I am trying to accomplish that effect on my logo each time the page loads.
I think you mean "zoom out".
You're missing the actual animation list definition:
#keyframes zoomIn{
0% {
opacity: 0;
transform: scale(10);
}
100% { /* <- not really required if these are the defaults */
opacity: 1;
transform: scale(1);
}
And it appears that you're using the wrong shorthand property format (see the syntax section here).
(here's an updated JSFiddle)