I have a problem with a styling thing.
See preview:
The blue part is an div with an light gradient, the white part is an after with an white SVG.
What I want is de red part there comes an image, this means that I need to remove the after with the white SVG. But is it possible to make an border like the white SVG so the white part is transparant?
Hope someone can help me out!
Ps. sorry for my bad English.
Current code:
.border-bottom-white::after {
content: '';
background-image: url('img/bottom_border_white.svg');
background-size: cover;
background-position: bottom right;
background-repeat: no-repeat;
display: block;
width: 100%;
height: 85px;
position: absolute;
bottom: 0;
right: 0;
}
#topheader {
position: relative;
display: block;
width: 100%;
background: rgb(20,44,176);
background: linear-gradient(0deg, rgba(20,44,176,1) 0%, rgba(24,57,191,1) 100%);
background-size: auto;
background-image: url('img/header-bg.svg');
background-position: bottom center;
background-size: 100% auto;
padding-top: 15px;
padding-bottom: 45px;
transition: min-height 0.5s ease-out;
-webkit-transition: min-height 0.5s ease-out;
}
I have found the solution guys!
#topheader{
position: relative;
display: block;
width: calc(100% + 24px);
background: rgb(20, 44, 176);
background: linear-gradient(0deg, rgba(20, 44, 176, 1) 0%, rgba(24, 57, 191, 1) 100%);
background-size: auto;
background-image: url('img/header-bg.svg');
background-position: bottom center;
background-size: 100% auto;
padding-top: 45px;
padding-bottom: 45px;
transition: min-height 0.5s ease-out;
-webkit-transition: min-height 0.5s ease-out;
border-bottom-right-radius: 80px;
transform: rotate(1deg);
left: -20px;
top: -30px;
}
#topheader>.container{
transform: rotate(-1deg);
}
Related
How would I be able to implement that?
Half an image on each side
Where 1 image fills both left and right panels.
I want one image to show as 1 whole image, then the transition effect to split it into 2 images.
code: https://jsfiddle.net/kqLpv21h/
.panel-left,
.paneldoor-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
background-image: url("https://picsum.photos/600");
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
}
.panel-left {
left: 0%;
background-color: rgb(91, 96, 106);
}
.panel-right {
left: 50%;
background-color: rgb(229, 211, 211);
}
.curtain.slide .panel-left {
left: -50%;
}
.curtain.slide .panel-right {
left: 100%;
}
<div class="panel-left"> </div>
<div class="panel-right"> </div>
Currently the image fills in both the left and right side.
I want only one image to appear, that fills in both sides.
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
background-image: url("https://picsum.photos/600");
- background-size: 100%;
+ background-size: 100vw;
background-repeat: no-repeat;
background-position: top;
}
.panel-left {
left: 0%;
background-color: rgb(91, 96, 106);
+ background-position: left;
}
.panel-right {
left: 50%;
background-color: rgb(229, 211, 211);
+ background-position: right;
}
This will make the Image seem like one. You might have to adjust some tiny things to fit your needs, but that's generally it.
I am trying to replicate this transition from uber.design site:
The thing is that i am stuck at reversing the transition:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
<span class="un">Underlined Text</span>
You can use gradient and adjust background-position with a delay to obtain such effect:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}
<span class="un">Underlined Text</span>
In case you want a continuous animation on hover you can try this:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right -100% bottom 0;
background-size: 200% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left -100% bottom 0;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient
Another kind of animation
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left bottom;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
let's don't forget the basic one:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right bottom; /* OR left bottom*/
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.un:hover {
background-size: 0% 2px;
}
<span class="un">Underlined Text</span>
You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40
Another related article: Cool Hover Effects That Use Background Properties
You'll need your pseudo element to be absolute positioned and use the :not selector to reproduce this effect.
.un {
display: inline-block;
position: relative;
}
.un:after {
content: '';
width: 0px;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}
.un:not(:hover):after {
right: 0;
left: auto;
}
<span class="un">Underlined Text</span>
The easiest solution of all, without :not selector or gradients, is to switch between right and left positions such as in the code.
span.un {
position: relative;
}
span.un::after {
position: absolute;
content: "";
background: black;
bottom: 0;
right: 0;
height: 2px;
width: 0%;
transition: 300ms ease-in-out;
}
span.un:hover::after {
width: 100%;
left: 0;
}
<span class="un">Underline me</span>
I am trying to replicate this transition from uber.design site:
The thing is that i am stuck at reversing the transition:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
<span class="un">Underlined Text</span>
You can use gradient and adjust background-position with a delay to obtain such effect:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}
<span class="un">Underlined Text</span>
In case you want a continuous animation on hover you can try this:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right -100% bottom 0;
background-size: 200% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left -100% bottom 0;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient
Another kind of animation
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left bottom;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
let's don't forget the basic one:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right bottom; /* OR left bottom*/
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.un:hover {
background-size: 0% 2px;
}
<span class="un">Underlined Text</span>
You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40
Another related article: Cool Hover Effects That Use Background Properties
You'll need your pseudo element to be absolute positioned and use the :not selector to reproduce this effect.
.un {
display: inline-block;
position: relative;
}
.un:after {
content: '';
width: 0px;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}
.un:not(:hover):after {
right: 0;
left: auto;
}
<span class="un">Underlined Text</span>
The easiest solution of all, without :not selector or gradients, is to switch between right and left positions such as in the code.
span.un {
position: relative;
}
span.un::after {
position: absolute;
content: "";
background: black;
bottom: 0;
right: 0;
height: 2px;
width: 0%;
transition: 300ms ease-in-out;
}
span.un:hover::after {
width: 100%;
left: 0;
}
<span class="un">Underline me</span>
I am trying to make a text color change either bottom up or up to bottom on hover.
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, green 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.box:hover {
background-position: 0 -100%;
}
<div class="box">Text</div>
the above code makes the box change color instead the text. What can I do to make the text color instead of the box.
You gotta use Background Clip:
.box {
width: 200px;
height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, green 50%);
-webkit-transition: background-position 3s;
-moz-transition: background-position 3s;
transition: background-position 3s;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font-size: 50pt;
}
.box:hover {
background-position: 0 -100%;
}
<div class="box">Text</div>
Note: I have increased the font size and time to 3 seconds to see the effect well.
You can achieve the effect using an overlay (the before pseudo element) with the background, and mix-blend-mode: screen:
.box {
position: relative;
width: 200px;
height: 100px;
font-size: 5em;
background: white;
}
.box::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, green 50%);
transition: background-position 1s;
content: '';
pointer-events: none;
mix-blend-mode: screen;
}
.box:hover::before {
background-position: 0 -100%;
}
<div class="box">Text</div>
i am trying to get the background color to change on hover. Something like this.
I have tried various approaches but cannot get it to work, presumably it is the way my CSS and HTML is set up. I cannot figure out why it is not working, as it should be easy to implement
Please see code below.
CSS
.image-container {
position: relative;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
display: none;
color: #FFF;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.image-container .after p {
position: relative;
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 300;
line-height: 300px;
height: 300px;
}
.image-container:hover .after {
display: block;
background: rgba(0,0,0,0.3);
background-position: 0 -100%;
}
[class*='col-'] {
float: left;
}
.col-1-3 {
width: 33.33%;
}
HTML
<div class="col-1-3 image-container">
<img class="portrait-image geysir" src="images/geysir.jpg">
<div class="after">GEYSIR</div>
</div>
Remove the background declaration on the hover. It's overriding all the other backgrounds you declared previously.
.image-container:hover .after {
display: block;
background-position: 0 -100%;
}
It should then work.
Based on the given fiddle, I would use a transparent .png image as a second overlapping element like that. Not sure if that's your intention...
.container{
position:relative;
}
.box {
width: 400px; height: 200px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.box:hover {
background-position: 0 -100%;
}
.geysir{
position:absolute;
top:0px;
}
<div class="container">
<div class="box"></div>
<img class="portrait-image geysir" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/high-resolution-dark-blue-denim-jeans-icons-arrows/008776-high-resolution-dark-blue-denim-jeans-icon-arrows-hand-pointer1-right.png">
</div>
Do you want to have the background, including the text slide in from the top on hover? In which case you would be better transitioning a bottom move like this:
.image-container {
position: relative;
overflow: hidden;
}
.image-container .after {
position: absolute;
bottom: 100%;
margin: auto;
width: 100%;
height: 100%;
color: #fff;
background-color: black;
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
transition: bottom 1s;
}
.image-container:hover .after {
bottom: 0;
}
Fiddle
If you're looking to have your text appear on a red background that shifts to black, try using a combination of the above with what you were using. Avoid using display: none/block as this stops the transistion from functioning.
.image-container {
position: relative;
overflow: hidden;
}
.image-container .after {
position: absolute;
bottom: 100%;
margin: auto;
width: 100%;
height: 100%;
color: #fff;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 2s;
-moz-transition: background-position 2s;
transition: background-position: 2s;
}
.image-container:hover .after {
bottom: 0;
background-position: 0 -100%;
}
Fiddle