I'm trying to make next animation: logo should be revealed by the div moving down. Div has a transparent background.
Is it possible to hide overlaying part of logo behind transparent div?
<div class="transparent">Some content</div>
<div class="logo"></div>
.transparent { position: relative }
.logo { position: absolute }
I very much doubt if you could clip or mask anything behind a transparent element.
So, perhaps you need to rethink the "hiding behind" part and consider other options.
Perhaps animating the height:
* {
padding: 0;
margin: 0;
}
.transparent {
height: 2em;
line-height: 2em;
border-bottom: 1px solid grey;
position: relative;
}
.logo {
height: 0;
background: orange;
position: absolute;
top: 100%;
width: 100px;
transition: height 0.5s ease;
}
.transparent:hover .logo {
height: 25px; /* assuming height is known */
}
<div class="transparent">Some content
<div class="logo"></div>
</div>
you can try giving visibility hidden property to hide the logo.
visibility:hidden
Maybe an effect like this may help that background of logo is the same as background of the div you are referring to as transparent.
Like this: http://codepen.io/anon/pen/aOwZLJ
You will need to do some complex calculations, if the background is an image, in order to make it look as one element.
You can try this too. Related mostly to hide some part of border.
div {
border-top: 1px solid black;
border-right: 1px solid black;
width: 50px;
height: 50px;
position: relative;
overflow: hidden;
}
div::after {
content: "";
height: 50px;
width: 100%;
border: 1px solid green;
display: block;
position: absolute;
border-right: 0px;
border-top:0px;
border-bottom: 0px;
top: -10px;
}
div::before {
content: "";
height: 50px;
width: 100%;
border: 1px solid green;
display: block;
position: absolute;
border-right: 0px;
border-top:0px;
border-left: 0px;
top: -1px;
left: 10px;
}
<div>
</div>
In 2021, it's actually possible, with some trickery.
First of all, overflow-y:hidden hides something from the bottom... unless it's upside down.
The wrapper should have any height, as long as it can serve as a cut off.
.wrapper {
height: 70px;
position: relative;
overflow-y: hidden;
transform: rotate(180deg);
}
.logo {
animation-name: stretch;
animation-duration: 2s;
animation-timing-function: linear;
transform-origin: top;
}
#keyframes stretch {
0% {
transform: translateY(110px) rotate(180deg);
}
100% {
transform: translateY(40px) rotate(180deg);
}
}
So now the logo will slide down from a seemingly transparent background.
Related
So I have a border transition on hover and on active for a circular button so the border increases in size. However, the border expands downwards, pushing the button downward. Is there any way to make it so the border expands evenly outward? I've searched this site and others for solutions, and while there are similar questions, they don't answer this specifically.
Thanks!
HTML:
<center><a class="btn" href="#"></a></center
CSS:
.btn {
vertical-align: top;
transform: translateY(20px);
background-color: black;
display: inline-block;
height: 300px;
width: 300px;
border-radius: 50%;
border: 0px solid red;
transition: border-width 0.1s ease-in;
margin: 0.5em;
}
.btn:hover {
border: 20px solid red;
}
.btn:focus {
border: 75px solid red;
}
Instead of using border, you can generate a border effect by placing a pseudoelement behind the button, and transforming its scale on hover and focus as needed.
*also note that <center> is deprecated in HTML5. You can center content with CSS instead.
.btn {
display: block;
margin: 5rem auto;
position: relative;
background-color: black;
height: 300px;
width: 300px;
border-radius: 50%;
transition: border-width 0.1s ease-in;
}
.btn:before {
content: '';
display: block;
position: absolute;
background: red;
border-radius: 50%;
width: 300px;
height: 300px;
z-index: -1;
transition: all .1s ease;
}
.btn:hover:before {
transform: scale(1.1);
}
.btn:focus:before {
transform: scale(1.25);
}
<a class="btn" href="#"></a>
I was experimenting around with box-shadows and thought it would be possible to make a window effect (as in the example below) so that you can hide text or an image underneath that can only be seen - or "opened" - when you hover/click.
Unfortunately it doesn't work like that, because the shadow will always be below the text or image, which I didn't realize until I was done.
Is there a fix for this, or should I use another way to get the same result without box-shadows?
body {
background: #20262E;
}
.window {
display: inline-block;
height: 200px;
width: 300px;
margin: 20px;
background: #F8F8F8;
text-align: center;
line-height: 200px;
}
.window {
box-shadow: inset 0 200px #0084FF;
transition: box-shadow 1s ease-in-out;
}
.window:hover {
box-shadow: inset 0 0 #0084FF;
}
<div class="window">
box 1
</div>
*Note: I haven't been able to figure out why the transition is flickering :/
Agree that it's probably a bug with box-shadow. If you're looking for another CSS way to handle this, how about the :before or :after pseudo elements?
body {
background: #20262E;
}
.window {
display: inline-block;
height: 200px;
width: 300px;
margin: 20px;
background: #F8F8F8;
text-align: center;
line-height: 200px;
position: relative;
}
.window:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #0084FF;
transition: bottom 1s ease-in-out;
}
.window:hover:after {
bottom: 100%;
}
<div class="window">box 1</div>
I'm looking to use HTML / CSS / JS to create an animation-type thing similar to this gif. I'm using ::before and ::after to create two 'half-circles' with border-radius: 50%, but I noticed that even with two borders removed, it will still taper off around the element. It's quite hard to explain, but this is it, and I'm sure you can see what I mean.
Here is a snippet:
.animation-container {
height: 100px;
width: 100px;
position: relative;
}
.animation-container::before, .animation-container::after {
content: '';
display: inline-block;
position: absolute;
border: 5px solid red;
border-radius: 50%;
}
.animation-container::before {
height: 100px;
width: 100px;
top: 0;
left: 0;
border-right: none;
border-top: none;
}
.animation-container::after {
height: 50px;
width: 50px;
top: 25px;
left: 25px;
border-left: none;
border-bottom: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Tests Page</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<div class="animation-container"></div>
</body>
</html>
Is there a special reason you're using animations? A gif is actually a lot more efficient than an animation in this scenario... Anyway, you can't prevent tapering since that's the logical thing to happen with an effect such as border-radius...
Maybe you could use something like this, though?
https://jsfiddle.net/vocfgfjn/1/
HTML:
<div class="box"></div>
CSS:
.box{
width:100px;
height:100px;
border:solid 5px #000;
border-color:#000 #000 transparent transparent;
border-radius: 100px 100px 100px 0;
}
What do you think about creating your half-circle like that ?
.half-circle {
width: 100px;
height: 100px;
position: relative;
border: 5px solid red;
border-radius: 50%;
animation: rotateAnim 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.half-circle:after{
content: "";
position: absolute;
top: -5px;
left: 50%;
right: -5px;
bottom: -5px;
background: #FFF;
}
#keyframes rotateAnim {
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}
<div class="half-circle"></div>
Goal: Make nice effect of hovering buttons in pure CSS, which will use ::after and ::before pseudo-elements. Look at this jsFiddle example to see, what I want to reach.
Code: Button will have some styling, also an background-color, which is turned off in this example.
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
/*background-color: white;*/
text-decoration: none;
color: black;
}
Problem: I want to use background-color and when I enable it, then I can't see pseudo-elements. It is like that, because these pseudo-elements have z-index: -1;, which put them behind the background. When I change z-index to 0 or 1, then text is not visible.
What I can't do: I can't add new elements inside buttons (like spans), because this is one already running website and client decided to change the behavior of buttons, so here I am. There are tons of buttons in this website, so this is the reason, why I want to find solution with pseudo-elements, because trying to find every single button and change them would be inappropriate.
If i understood you well, this is what you are looking for:
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
/*background-color: white;*/
text-decoration: none;
color: black;
border:1px solid;
}
a.button:before {
content: " ";
display: block;
z-index: -1;
position: absolute;
height: 0%;
top: 0;
right: 0;
left: 0;
background: #ddd;
transition: height 0.2s ease;
}
a.button:hover:before {
height:100%;
}
TEST
Consider an alternative method of doing the background colour transition thing.
As seen in this edited demo:
/* remove all references to .button::before */
.button {
background-image: linear-gradient(to bottom,
transparent, transparent 100%,
red 100%, red);
transition: background-image 0.5s ease 0s;
}
/* the "gradient" above has the practical result of being fully transparent,
but it has been carefully crafted so that the transition gives the desired result */
.button:hover {
background-image: linear-gradient(to bottom,
transparent, transparent 0%,
red 0%, red);
}
You can transition gadients, and in this case it is done stop-by-stop. The first and last stops don't change, but the middle two transition from 100% to 0%, essentially meaning that the cut-off point between transparent and red slides from the bottom to the top of the button, giving the effect you want.
You can now replace transparent with your desired background colour.
* You may need to remove the z-index:-1 from the ::after element to get the border effect back.
You can do something like,
HTML
CSS
body {
background: #FF7272;
}
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
text-decoration: none;
color: black;
z-index: 0;
background-color: white;
width: 50px;
}
.button::before, .button::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.button::after {
content: "TEST";
height: 50%;
width: 72px;
text-align: center;
z-index: 2;
line-height: 0.2;
border-left: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
}
.button::before {
height: 0%;
background-color: red;
transition: all 0.5s ease 0s;
z-index: 1;
}
.button:hover::before {
height: 100%;
}
Example: https://jsfiddle.net/LL0f7rwp/6/
Some values are hard coded, but hope you can get an idea out of it :)
It's because z-index: -1 and background-color: white will push your :before and :after elements beneath.
Remove z-index: -1 from :after and :before and add to hover .button:hover::before
Make the background-color: transparent while hovering. Updated fiddle.
body {
background: #FF7272;
}
.button {
display: inline-block;
position: relative;
height: 35px;
line-height: 35px;
padding: 0 15px;
background-color: white;
text-decoration: none;
color: black;
}
.button::before,
.button::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.button::after {
height: 50%;
border: 4px solid red;
border-top: 0;
}
.button::before {
height: 0%;
background-color: red;
transition: all 0.5s ease 0s;
}
.button:hover::before {
height: 100%;
z-index: -1;
}
.button:hover {
background-color: transparent;
}
TEST
I'm trying to create a CSS transition where the border-bottom of a href element expands on :hover to the width of the link.
What I could find is a CSS solution where the background width is animated:
http://jsfiddle.net/mfn5nefb/82/
But that's not what I want, because after click on a navigation tab I want to leave the border as is. So I'd have to directly animate the border, instead of the background.
<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">CSS IS AWESOME</h1>
h1 {
color: #666;
position: relative;
display: inline-block;
}
h1:after {
position: absolute;
left: 50%;
content: '';
height: 40px;
height: 5px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
h1:hover:after {
width: 270px;
margin-left: -135px;
}
Here you see the "active" link gets a green border. And on hover I'd like to animate the other tabs, but the border itself. Currently the background is animated, which appears above the border and thus looks misaligned.
You can still achieve this by using a pseudo-element (with background) and expand it on hover. All that is required is to set the value for the bottom property as the inverse of expected border-width and also set the height of the pseudo-element to be the same as the border-width.
h1 {
color: #666;
position: relative;
display: inline-block;
}
h1:after {
position: absolute;
left: 50%;
content: '';
height: 3px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: -3px;
}
h1:hover:after {
width: 100%;
left: 0px;
}
<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">Tab1</h1>
<h1>Tab2</h1>
Another way to achieve the same effect using the border property itself would be to use transform: scale like in the below snippet. Here the scaleX(0) makes the original width of the element as 0 and on hover it is transitioned to full width using scaleX(1). Since, default transform-origin is at 50% in X-axis, the border looks as though it is expanding from the center.
h1 {
color: #666;
position: relative;
display: inline-block;
}
h1:after {
position: absolute;
left: 0%;
top: 0%;
content: '';
height: 100%;
transition: all 0.5s linear;
width: 100%;
border-bottom: 3px solid red;
transform: scaleX(0);
}
h1:hover:after {
transform: scale(1);
}
<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">Tab1</h1>
<h1>Tab2</h1>