I'm total begginer.
So the problem is that the animation is working alone( separated file) but when i try to use it on my website it doesn't fill up as it should .
I tried to change every color and transparency of colors on my website but it doesn't help.
I have no idea what i did wrong and how can i solve it because i literally copied and pasted working code ;(
I put here 2 links about how it should be and how it is :
How it should be - https://jsfiddle.net/42x0md5s/
How it is (bugged) - https://jsfiddle.net/5duf2aw7/1/
The piece of code that it's not working is starting at line 209
/* STARBUCKS ANIMATION */
span
{
position: relative;
font-size:14vw;
color:#252839;
-webkit-text-stroke: 0.3vw #383d52;
text-transform: uppercase;
}
span::before
{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
color:#017143;
-webkit-text-stroke: 0vw #383d52;
border-right: 2px solid #017143;
overflow:hidden;
animation: animate 6s linear infinite;
}
#keyframes animate
{
0%,10%,100%
{
width: 0;
}
70%,90%
{
width: 100%;
}
}
Thank you in advance to anyone that can solve it. <3
There's two things you need to do:
Change the color on .content .textBox h1 span to transparent. It's already green so you wouldn't be able to see the new colour.
Change content: attr(data-text); to content: 'STARBUCKS'; on your span:before.
Related
thanks for reading and offering help.
I assume my CSS code shouldn't be too complicated, however, it does not behave the way I want.
Expected result: when hovering over the button, there is a background area "folding up" (no background color to dark background color).
Actual results:
Works in Chrome (Version 88.0.4324.146), however, there is a flicker to it, like it is rebuilding again and again. This happens especially when hovering coming from the top. Looks alright when doing it from the bottom and rather slow.
I also saw that it seems to not really work in FF (Dev Edition 86.0b9). Sometimes it pops up, but if it does, it only does so once. Refreshing the browser window is not helping either.
I already tried to have a <div> around it and apply the hover animation to it, to fix it with prefixes... so far I couldn't make it work (smoothly), the issue always persisted.
So, this is the code now, which can also be found in this codepen example
html:
<button class="btn">
click
</button>
CSS:
.btn {
height: 48px;
width: 200px;
text-align: center;
text-transform: uppercase;
border: none;
border-bottom: 1px solid steelblue;
position: relative;
color: steelblue;
background: transparent;
::before {
bottom: 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
z-index: -1;
}
&:hover,
&:focus {
animation: one 0.25s linear;
background-color: steelblue;
color: whitesmoke;
opacity: 1;
transform-origin: 50% 100%;
}
#keyframes one {
0% {
transform: perspective(1000px) rotateX(90deg);
}
100% {
transform: perspective(1000px) rotateX(0);
}
}
}
If this is a duplicate, it means I didn't find the helping answer yet, will be happy for any solutions and hints.
The problem also happens in Chrome. It happens because you are changing the perspective of the button, which will change its "bounding box".
So when you mouse over the bounding box the animation will change the bounding box, and then the mouse is not over the bounding box, so the animation stops, but then the mouse is over the bounding box again, so the animation starts, and so on.
To fix this, create a container around the button, and make the countainer change the button perspective, instead of the button changing the perspective itself. The container will retain its bounding box when yo do this:
.bcg {
display: flex;
justify-content: center;
align-items: center;
background: whitesmoke;
height: 100vh;
}
.btncontainer {
display: inline-block;
}
.btncontainer:hover .btn, .btncontainer:focus .btn {
animation: one 0.25s linear;
background-color: steelblue;
color: whitesmoke;
opacity: 1;
transform-origin: 50% 100%;
}
#keyframes one {
0% {
transform: perspective(1000px) rotateX(90deg);
}
100% {
transform: perspective(1000px) rotateX(0);
}
}
.btn {
height: 48px;
width: 200px;
text-align: center;
text-transform: uppercase;
border: none;
border-bottom: 1px solid steelblue;
position: relative;
color: steelblue;
background: transparent;
}
.btn::before {
bottom: 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
z-index: -1;
}
<div class="bcg">
<div class="btncontainer">
<button class="btn">
click
</button>
</div>
</div>
I come back here looking for your wisdom. I have been working on a website and I did some css to make a width transform animation effect behind some text, and it works fine using hover, buuut I would like to have the same effect only with an automatic animation (with some delay that works with the scroll), but saddly I don't know how.
Any ideas ?
Thanks so much !
here the website:
http://231e47.com/accueil-cf/
The hover effect is on the text "we are here!"
Here my CSS:
<style>
.highlight { display: inline-block;
color: #343434;
text-decoration: none;
position: relative;
z-index: 0;
}
.highlight::after {
position: absolute;
z-index: -1;
bottom: 10px;
left: 0%;
transform: translateX(0%);
content: '';
width: 0px;
height: 43%;
background-image: linear-gradient(120deg, #48d1de 0%, #84fab0 180%);
transition: all 250ms;
}
.highlight:hover {
color: #343434;
}
.highlight:hover::after {
height: 43%;
width: 108%;
}
</style>
THANKS A LOT !
I've been racking my head over this seemingly little thing for a while but I'm at my wits end. I'm running a free Customizr theme on my site.
What I am trying to achieve is to have the hover effect in the navigation bar like this demo here. As you can see, only the text of the dropdown menu items are nicely underlined.
I've found and tried to use this CSS code here:
.sliding-middle a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle a:hover:after {
width: 100%;
background: #08c;
}
However, the result I got as you can see here, the dropdown menu items are underlined all the way across. I found that if I didn't target the "a" tags, the line would appear even more weirdly on the main menu items. But by doing so, the whole submenus inherit this effect.
If anyone has any idea what I'm missing, please help me out. Thank you in advance!
The example you want to achieve uses two span-nodes inside the a and only targets the first one (adding a pseudo :before) with this CSS
.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before {
background-color: #313131;
visibility: visible;
-webkit-transform: translate3d(0,0,0) scaleX(1);
-moz-transform: translate3d(0,0,0) scaleX(1);
transform: translate3d(0,0,0) scaleX(1);
}
If you add a span for the link text, you should get pretty much the same result.
Alright! After a few days of stressing it out and breaking my site, I've finally sort-of solved this issue.
Firstly, as #janh2 mentioned, you need to get the page to add span tags to the navigation menu labels. I've asked a different question and have updated it with the answer.
Next it's simply using the following to get the result:
.sliding-middle span {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle span:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle span:hover:after {
width: 100%;
background: black; /*colour you want your line to be*/
I hope this helps guys.
I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
I am currently running into a problem when trying to implement a simple rollover using CSS :after and :hover pseudo-elements.
Have a look at the clock and facebook icons to the right: http://clean.philippchristoph.de/
Here's the CSS code:
.icon {
background: url('../img/clock_icon.png') top left no-repeat;
width: 25px;
height: 25px;
}
.icon:after {
.transition(opacity, .2s, ease);
content: " ";
position: absolute;
top: 4px; left: 5px; bottom: 0; right: 0;
background: url('../img/clock_icon.png') no-repeat;
background-position: -25px 0;
opacity: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
As you can see, the image is faded using a sprite and opacity. However, now I can't seem to hover both elements anymore. As you will see on the example page, you can hover over the facebook icon, but not over the clock. If you remove the facebook icon, you can hover over the clock again. Note that the two icons are entirely seperate elements.
I've tested this behavior on both FF and Chrome on Windows.
It'd be awesome if someone could shed some light onto this issue.. :)
Replace your CSS with this one (I mean the mentioned classes only, not your entire CSS :) ):
.icon {
background: url("../img/clock_icon.png") no-repeat scroll left top transparent;
height: 25px;
width: 25px;
position: relative
}
.icon:after {
-moz-transition: opacity 0.2s ease 0s;
background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent;
bottom: 0pt;
content: " ";
left: 0;
opacity: 0;
position: absolute;
right: 0pt;
top: 0;
}
.icon:hover:after, .clock:hover div {
opacity: 1;
}
.facebook, .facebook:after {
background-image: url("../img/facebook_icon.png");
}
.clock {
position: relative
}
.clock div {
-moz-transition: opacity 0.2s ease 0s;
color: #A0A0A0;
font-size: 12px;
left: 40px;
line-height: 11px;
opacity: 0;
position: absolute;
top: 5px;
width: 160px
}
You need to add position: relative to your icon class, so that the generated content is positioned relative to that, rather than the parent. I've tried to simplify what you have in a fiddle, though I wasn't 100% sure what you are after. Is that close? I also amended the positioning of the generated content.
It's worth noting that - annoyingly - you can't apply a transition to generated content (which is why any attempt to have the opacity transition on these elements will fail in your case). Hopefully this will change soon.