This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Only transition a transform in css?
(4 answers)
Closed 1 year ago.
I have the following code:
z {
color: #0563bb;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2),
}
<p>Hi there <z>This is the text that needs the hover animation</z>
Why doesn't the animation seem to work? Is it because its text or am I doing something wrong?
The problem there is you are using transform but not transition. This way the text jumps to the next state without an animation. This should fix your problem:
z {
color: #0563bb;
display:inline-block;
trasform: translate(0, 0);
transition: all 0.8s linear;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px -8px rgba(0, 0, 0, .2);
transition: all 0.8s linear;
}
<p>Hi there <z>This is the text that needs the hover animation</z></p>
You should also remove the comas from the box-shadow value.
It just needs a block-style display, as in display:inline-block;
Additionally, I added a transition on the element for a little animation.
Note: Your box-shadow values were not valid. I corrected them, but take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Thanks #evolutionxbox for the guidance and extra set of eyes
z {
color: #0563bb;
display:inline-block;
transition: transform .3s;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px 8px rgba(0, 0, 0, .2);
}
<p>Hi there <z>This is the text that needs the hover animation</z></p>
Your box-shadow property value is invalid. Remove the commas:
z {
color: #0563bb;
display:inline-block;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px -8px rgba(0, 0, 0) /* percentage removed for demonstration */
}
<p>Hi there <z>This is the text that needs the hover animation</z>
If you want to make the changes "animate", simply specify a transition duration:
z {
color: #0563bb;
display:inline-block;
transition:0.5s;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px -8px rgba(0, 0, 0) /* percentage removed for demonstration */
}
<p>Hi there <z>This is the text that needs the hover animation</z>
There is no Element have name <z> in HTML, You Should not Put , in the last Line so The right Code in HTML mey be Lik eThis:
<p>Hi there <div class="z">This is the text that needs the hover animation</div></p>
and CSS Like This :
.z {
color: red;
display: inline-block;
}
.z:hover {
transform: translate(0, -7px);
box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}
Or You should add Closing Tag For p Tag and Remove , in CSS Code and Replace it with ;.
So Your Code Mey Be Like This:
<p>Hi there <z>This is the text that needs the hover animation<z></p>
and CSS Like This:
z {
color: red;
display: inline-block;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}
Related
I want to make a similar page as this one: https://lp.anzi.kr/?page=listeners.
When you hover over a button, it moves up and some text will show with a background.
I try to make this with the following code: https://jsfiddle.net/rcv8b0kh/3/
$button = document.querySelector('button');
$textcontent = document.querySelector('.textcontent');
if ($button.hover) {
$textcontent.classList.add('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
visibility: hidden;
}
.active {
visibility: 1;
transform: translateY(-3.5rem);
transition: all .3s ease 0s background-color: black;
color: white
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
I also see people using ::before and ::after for these kind of animations but I don't really know how to implement them here.
Here's a solution with pure CSS and :after pseudo element:
div {
position: relative;
width: 10em;
}
p {
text-align: center;
transform: translateY(4rem);
}
p:after {
content: "";
display: block;
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
transform: translateY(-5rem);
}
div:hover p:after {
transform: translateY(-12rem);
}
<div>
<p>some text</p>
</div>
You seem to be getting confused between javascript and jquery. However, I don't think ($button.hover) would be a valid condition in either.
button = document.querySelector('button');
textcontent = document.querySelector('.textcontent');
button.addEventListener('mouseover', handlerIn)
button.addEventListener('mouseout', handlerOut)
function handlerIn() {
textcontent.classList.add('active')
}
function handlerOut() {
textcontent.classList.remove('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
transition: opacity 0.2s linear;
}
.active {
opacity: 1;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
you don't need js to do that its a simple css method
<div>
<button class="hoverbtn" id="hoverbtn">
</button>
<div id="textcontent" class = "textcontent">
<span>some text</span>
</div>
</div>
and here is css to hide and show text
If the second item is directly inside the container:
#hoverbtn:hover > #textcontent { opacity : 1 }
If the second item is next to (after containers closing tag) the container:
#hoverbtn:hover + #textcontent { opacity : 1 }
If the second item is somewhere inside the container:
#hoverbtn:hover #textcontent { opacity : 1 }
If the second item is a sibling of the container:
#hoverbtn:hover ~ #textcontent { opacity : 1 }
so here is your css :
.hoverbtn {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
.hoverbtn:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all 0.3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
}
.hoverbtn:hover+.textcontent {
opacity: 1;
}
reference : https://stackoverflow.com/a/4502693/6550949
You really shouldn't need Javascript to do this.
I'm not really sure what you're looking for, but I'd use a width / opacity transition on the .textContent (when button is hovered) and it achieves very similar results to the page you have linked.
button {
background-color: red;
border-radius: 50%;
border: none;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
}
button:hover {
box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent p{
width:0px;
opacity:0;
transition: opacity .3s ease 0s;
}
button:hover + .textcontent p{
width:200px;
opacity:1;
transition: all .3s ease 0s;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
How can I stop this animation through JS/Jquery?
.progressLoading::-webkit-progress-value {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
border-radius: 10px;
background:
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-webkit-linear-gradient(left, #963a2d, #832417);
background-size: 25px 16px, 100% 100%, 100% 100%;
-webkit-animation: move 5s linear 0 infinite;
}
#-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: 100px 0px, 0 0, 0 0}
}
I've tried this with no success:
$(".progressLoading::-webkit-progress-value").css({ '-webkit-animation-play-state': 'paused' });
As far as I know, you can't select pseudo elements with jQuery since they don't technically exist in the DOM tree.
One option would be toggle or add a class to the element:
$(".progressLoading").addClass('paused');
$(".progressLoading").toggleClass('paused'); // or toggle it
Then you could use the selector .progressLoading.paused::-webkit-progress-value to select the element and pause the animation via the CSS:
.progressLoading.paused::-webkit-progress-value {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
How to create a smooth text input box shadow effect like on this website
Use the CSS3:
#element {
/* all your styles.. */
-webkit-transition:0.2s linear;
-moz-transition:0.2s linear;
-o-transition:0.2s linear;
transition:0.2s linear;
}
#element:hover {
-webkit-box-shadow:0 0 5px blue;
-moz-box-shadow:0 0 5px blue;
-o-box-shadow:0 0 5px blue;
box-shadow:0 0 5px blue;
}
Try using Firebug or similar tool there.
You declare some initial "invisible" box shadow and its visible counterpart and declare some transition in addition:
.elem {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: box-shadow 0.2s linear 0s;
}
.elem:hover {
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
This styling is extracted from that site.
EDIT: You wanted mouseover rather than focusing.
.element
{
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.elem:hover
{
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}
.button1{
background: #E68A00 url(wooden.jpg) repeat-x;
border: 2px solid #eee;
height: 28px;
width: 115px;
margin: 50px 0 0 50px;
padding: 0 0 0 7px;
overflow: hidden;
display: block;
text-decoration:none;
font-family: 'Sacramento', cursive;
color : white;
font-size: 30px;
/*Rounded Corners*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
pg.button1{
position:absolute;
right:0px;
top:100px;
}
pg:hover {
width: 200px;
}
<pg <a class = "button1" href="http://www.google.com">Small $14 </a> </pg>## Heading ##
The above tag was a link until i introduced the tag pg which is meant to position the link on the screen. The reason is that i still want to use the class with other objects ! so i don't have to duplicate my code! i have created tags like p1 p2 p3 p4 to use with that same class
It actually positions it but its no longer a link ! Why is that ? and how do i get this working again ?
Rather than invent new tags, just use multiple classes. In this case, depending on what you're actually trying to do, you can do this:
<a class="button1 pg" href="...">Small $14</a>
Or this:
<div class="pg"><a class="button1" href="...">Small $14</a></div>
Hey guys Iam trying 2 use light box at the moment and every thing is working fine. However what iam trying 2 figure out is how do i get a border like http://lokeshdhakar.com/projects/lightbox2/ the ones which they got in the examples to change colour. Any help on this would be great.
html:
<div class = "image1">
<img src="images/image1t.jpg" />
</div>
Try the below code
.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}
Set a css3 transition property on your anchors, then on :hover property, the effects will "animate".
.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}