I created buttons that have a hover effect. The button fills from bottom to top with a background color white, and the text changes color. However, there is this weird line that appears at the bottom when the animation takes place. Any help would be greatly appreciated.
.project-button div {
position: relative;
display: inline-block;
padding: 1rem;
margin: 0 1rem 1rem 1rem;
font-size: 1rem;
font-weight: 700;
border: 1px solid white;
border-radius: 15px;
background-repeat: no-repeat;
transition: background-size .5s, color .5s;
}
.to-top {
background-position: 50% 100%;
background-size: 100% 0%;
}
.project-button a {
color: white;
}
.project-button div:hover {
background-size: 100% 100%;
background-image: linear-gradient(white, white);
}
.color-blue:hover {
color: #51d0de;
}
/* Misc */
html {
background: black;
margin: 1em;
}
<div class="project-button">
<div class="to-top color-blue">Visit Site</div>
</div>
Try the following:
I think the problem has to do with how Chrome computes the animation. At times (depending on the frame) the white background is just a bit too small to fill the button revealing the black background (hence the flicker).
.project-button div {
position: relative;
display: inline-block;
padding: 1rem;
margin: 0 1rem 1rem 1rem;
font-size: 1rem;
font-weight: 700;
border: 1px solid white;
border-radius: 15px;
background-image: linear-gradient(white, white);
background-repeat: no-repeat;
background-position: 0 -100%;
background-size: 100% 200%;
transition: background-position .5s, color .5s;
}
.project-button a {
color: white;
}
.project-button div:hover {
background-position: 0% 0%;
}
.color-blue:hover {
color: #51d0de;
}
/* Misc */
html {
background: black;
margin: 1em;
}
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="project-button">
<div class="color-blue">Visit Site</div>
</div>
</body>
</html>
Inspired by Transition background-color via slide up animation
Related
i trying to make background-position animation like this:
<div id="topAreaContainer">
<a href="http://www.google.co.il">
גכעגכע גע גכעגכע
</a>
</div>
body {
background: #000000;
direction: rtl;
}
#topAreaContainer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 70px;
color: #ffffff;
width: 50%;
justify-content: center;
text-align: center;
}
#topAreaContainer a {
color: #ffffff;
text-decoration: none;
font-size: 1.5em;
background: transparent;
background: linear-gradient(to right, transparent 50%, #ffffff 50%);
background-size: 200% 100%;
background-position: left bottom;
transition: background-position 0.4s ease;
border: 3px solid #ffffff;
padding: 7px 25px;
margin: 0;
}
#topAreaContainer a:hover {
background-position: right bottom;
color: #78899c;
}
https://jsfiddle.net/Layfv2sj/
i tried to change the percent but nothing helped.
with english text its working fine.
what can i do?
Hover gradient and background image with smooth in and out transition
so I am making a website. background-color: #212121; that has come to have a hover gradient with the background image with smooth in and out transition.
now, the transition is not smooth. It is flashing.
But one thing without changing the position and size of the .amsecta. can you help me?
<section class="m-containera">
<div class="am-secta">
<div class="contenta">
<div class="titls">Stream your favourite <br class="inlin md:hidden"> tracks right now</div>
<div class="par"> <i class="fab fa-spotify"> </i>Spotify Playlist</div>
</div>
<div class="iframe-container">
<iframe src="https://open.spotify.com/embed/artist/6ffL1W3QlzZGnP90Ffi3kY?theme=0" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
</section>
body{
background-color: 212121;
}
.iframe-container {
padding-top: 29.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 360px;
left: 15%;
position: absolute;
top: 0px;
width: 70%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.iframe-container iframe:hover {
box-shadow: 0 5px 20px rgb(0 0 0 / 160%);
}
.m-containera {
width: 100%;
max-width: 1517px;
margin: 0 auto;
align-content: center;
text-align: center;
}
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}
.contenta {
padding: 0 10px;
}
.titls {
font-size: 34px;
font-weight: 700;
text-align: center;
color: white;
font-family: 'Raleway';
}
.par { color: white;
text-align: center;
font-weight: normal;
font-size: 20px;
line-height: 1.5;
padding-top: 10px;
padding-bottom: 45px;
font-family: 'Raleway';
}
.inlin {
display: none;
}
.bold {
font-weight: 700;
}
Maybe, you are looking for this:
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}
I am currently developing a styleguide and the hover-state of my navigation is giving me some headache, but I am pretty sure, that it could be solved very easily, so I just want to ask, if someone has an idea.
My html looks like this:
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem'><a href='#'>Design</a></li>
<li class='components__navItem' id='active'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>
and my css looks like this:
.components__navigation {
display: flex;
height: 75px;
align-items: center;
padding-left: 50px;
border-bottom: 4px solid #f5f5f5;
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
margin-right: 50px;
}
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem a:hover {
background-size: 100% 3px,auto;
}
#active a {
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 100% 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
}
Here is a pen to make it more visual:
https://codepen.io/dbljn/pen/abbMdVE
The current hover-state is right under the font of the tabs, but I want the hover-state to be where the gray border is. Like so:
Do you have an idea? And thanks a lot!!
It is always a good practice to write similar styling rules when the elements are overlapping on each other.
for example, we could use the same background-image property with nav html element instead of border property
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
remove the margin from ul element and background-image from below selectors so that the nav element will spread on li element and will be dynamic
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
finally give the li element its background-image and other CSS rules,
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
Since you want the animation while hovering on li element, the :hover pseudo attribute should be present on this li element, also it's good to use classes instead of id
.components__navItem:hover, .active {
background-size: 100%;
}
Finally putting it all together,
body, html {
margin: 0;
}
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem:hover, .active {
background-size: 100%;
}
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem active'><a href='#'>Design</a></li>
<li class='components__navItem'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>
Try replacing .components__navItem a with:
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
padding-bottom: 33px;
}
This is assuming a fixed font size though.
I am trying to carry out an animation on links, the background should fill from left to right, and then the background should reverse and go from right to left. I have created a Pen for the first part:
p {
color: #000;
}
a {
background: linear-gradient(to right, #903e77 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
color: #000;
text-decoration: none;
}
a:hover {
background-position: left bottom;
transition: background 250ms ease-in-out;
}
<p>This is a sentence with a link in the middle.</p>
I am thinking this needs a span element or something inside to act as another background block.
The effect would be similar to links here:
https://ueno.co/contact
In the footer is most noticeable.
You can adjust it like this:
p {
color: #000;
font-size: 40px;
}
a {
background: linear-gradient(#903e77, #903e77);
background-size: 200% 100%;
background-position: 200% 0;
background-repeat: no-repeat;
color: #000;
text-decoration: none;
}
a:hover {
background-position: -100% 0;
transition: background 0.5s ease-in-out;
}
<p>This is a sentence with a link in the middle.</p>
Or like this:
p {
color: #000;
font-size: 40px;
}
a {
background: linear-gradient(#903e77, #903e77);
background-size: 0 100%;
background-position: left;
background-repeat: no-repeat;
color: #000;
text-decoration: none;
transition: background-size 0.5s,background-position 0s 0.5s;
}
a:hover {
background-size:100% 100%;
background-position:right;
}
<p>This is a sentence with a link in the middle.</p>
Also like this:
p {
color: #000;
font-size: 40px;
}
a {
background: linear-gradient(#903e77, #903e77);
background-size: 200% 100%;
background-position: 200% 0;
background-repeat: no-repeat;
color: #000;
text-decoration: none;
transition:background-position 0.5s;
}
a:hover {
background-position: -100% 0;
}
<p>This is a sentence with a link in the middle.</p>
You could use a positioned pseudo-element on the link and manipulate the position of that with a transform
p {
color: #000;
font-size: 2em;
}
a {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: bottom;
}
a:before {
content: "";
width: 100%;
position: absolute;
left: 0;
height: 100%;
background: pink;
z-index: -1;
transform: translateX(-100%);
transition: transform 1s;
}
a:hover:before {
transform: translateX(100%);
}
<p>This is a sentence with a link in the middle.</p>
I would like to darken only lower part of the image and ofcourse with linear gradient, so that it goes from light on the top to dark at the bottom of the div.
If there is the other option to do that with div, where the text is there?
Do you need to do that in css or style inside html?
My html code where that background image is:
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background-image: url(image.jpg); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading"><h1><?php the_title(); ?></h1>
<div class="p-content">
here is the text
</div>
</div>
</div>
</div>
</div>
my style.css contains these entries:
#content-wide {
position: relative;
width: 1180px;
float: left;
background: #F4F4F4;
margin-bottom: 19px;
}
.imgwide {
width: 1160px;
height: 450px;
margin: 10px 10px 10px 10px;
}
#content-wide .post, #content .page {
background-color: #F4F4F4;
}
#content-wide .p-heading {
position: absolute;
bottom: 0;
left:0;
width: 844px;
height: 180px;
}
#content-wide .p-heading h1 {
color: #F8F8F8;
font-size: 26px;
padding: 20px 20px 20px 30px;
}
#content-wide .p-heading h1 a {
color: #F8F8F8;
text-decoration: none;
text-transform: none;
}
#content-wide .p-heading h1 a:hover {
text-decoration: none;
color: #F8F8F8;
}
#content-wide .p-content {
padding: 0px 20px 20px 30px;
font-family: Frutiger, Lato;
font-size: 15px;
line-height: 16px;
text-align: none;
color: #EAEAEA;
}
You can use a CSS solution, check Transparency Gradient, it works like this :
background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('your_url');
This will darken the bottom of your background-image.
If you do not want to darken the image but the div on top of it then use :
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%);
on your div (.p-heading).