If you look at the following site: staging.cancerwellness.com, and high light the top menu, you will see that the item turns red, but the underline is shifting right.
Here is the css code:
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link {
position:relative;
text-decoration:none;
display:block;
}
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:after {
display:block;
content: '';
border-bottom: solid 1px #cf2734;
border-bottom-width: medium;
transform: scaleX(0);
transition: transform 250ms;
transform-origin:100% 50%
}
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:hover:after {
transform: scaleX(1);
transform-origin: 100% 50%;
display:block;
}
FWIW, I did try display:inline-box but it didn't work.
What could be causing the border shifting right?
Thank you,
Kevin Davis
Related
Have a box with some text inside. When I hover it, I want to scale / zoom it bigger with an animation. When the animation ends, the blurred effect is removed from the container. Is there anyway to remove the blur effect after the transition ?
The Code (http://codepen.io/ptongalex/pen/dNZdmV):
.box {
border: solid red 2px;
width: 100px;
position:relative;
text-align:center;
left: 50%;
top:200px;
}
.box:hover {
-webkit-filter: blur(0);
-webkit-transform: translateZ(0);
transform: scale(3);
transition: transform 1s;
}
<div class='box'>
<h1>Text</h1>
</div>
One solution could be to start you box as big and then have it scaled down to your desired size. When you then hover the box you scale it up to 1. This way you prevent the box and its content from being pixelated/blurry when scaling:
.box {
border: solid red 6px;
width: 300px;
position:relative;
text-align:center;
font-size: 54px;
transform: scale(0.33);
margin: 0 auto;
transition: transform 1s;
}
.box:hover {
transform: scale(1);
}
<div class='box'>
<h1>Text</h1>
</div>
This should work.
filter: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
But in some cases the element will be blurred during animation if you use transition.
I would like to know if there is a term for those navbars with an stripe of solid colour below it, and animates when hovering. I find it very pleasing to look at.
Currently using: https://steelseries.com/
http://prntscr.com/bvaz2u
Does it use any Javascript? Is it easy to create?
Even though this is duplicate, here is a CSS only solution:
.navbar {
max-height: 50px;
}
.navbar-nav>li:after {
content: '';
display: block;
border-bottom: 5px solid transparent;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition: ease .25s;
}
.navbar-nav>li:hover:after {
border-bottom: 5px solid #E74C3C;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Working Codepen example:
http://codepen.io/charliebeckstrand/pen/YWaWzp
To answer your question, JavaScript is not necessarily and I do not believe there is an official term for it. "Animate Border Bottom" is an appropriate description though.
I'd like to implement a "funny" Navigation into my website, with perspective and stuff, but, as a beginner, I look at a brick-wall.
I just don't find a way to get the line backface-visibility: hidden; working.
My goal is:
Front:
Back:
The result with the code below is (in rotation-state):
There are plenty of working sample-codes on CodePen, and I tried to figure it out without success. Weird things happened, but never did the backface-visibility of an object get its hidden-state.
I used a great template to work on (designmodo.com) and trimmed it down to this:
HTML
<body>
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
</body>
CSS
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin:-156px 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform:translateZ(10px);
backface-visibility:hidden;
}
.layer-2 {
transform:rotateY(180deg);
}
Please see my pen: https://codepen.io/herrbraun/pen/JKroYa
(the rotation is there only to show the not-working blackface-visibility –– once it works, it'll be interactive)
If somebody could have an eye on what I've got so far, I don't see any typos or syntax-errors, but – what makes the CSS "fail"?
First of all, you have a syntax error:
.layer-1, layer-2 {
should be
.layer-1, .layer-2 {
Also, for this setup to work, you need to set
.poster {
transform-style: preserve-3D;
}
because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.
Your snippet corrected
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
#keyframes rotating {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
.poster {
animation: rotating 10s linear infinite;
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin: 0 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
transform-style: preserve-3D; /* new */
}
.poster .shine {
position:absolute;
top:0;
left:0;
background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
z-index:100;
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform: translateZ(10px);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .1s;
transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
background-color: red;
transform:rotateY(180deg);
}
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
Try setting the animation to .layer-1 and .layer-2 instead of .poster and set the animation-delay of .layer-2 to -5s
Ok guys, here's the problem: I made this simple menu with three menu-items, and I want to move each div to the right every time I hover on it (simple, right? Unfortunately not...)
While it does the ease-in animation, it won't do at all the ease-out one, the result being not fluid, but blocky and not cool at all.
I searched online and on StackOverflow, too, and applied all fixes/suggestions made, but I wasn't able to get it to work.
Here's the code (to try, for example, on jsFiddle)
HTML:
<div id="menu-container">
<div class="menu1">Menu 01</div>
<div class="menu2">Menu 02</div>
<div class="menu3">Menu 03</div>
</div>
CSS:
#menu-container div{
height: 30px;
width: 200px;
border:1px solid #999;
background-color:#222;
color:#ccc;
left: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#menu-container div:hover{
position: relative;
color:#fff;
background-color:#333333;
left: 20px;
padding-left: -20px;
}
#menu-container div.menu1:hover{
border-color: red;
}
#menu-container div.menu2:hover{
border-color: blue;
}
#menu-container div.menu3:hover{
border-color: green;
}
What am I doing wrong? Is there a way to fix it?
Thanks in advance
This is because the divs are only position: relative on hover, which is not animatable. The animation effect on left is lost when it switches back to position: static. Simply add position: relative to the un-hovered style.
http://jsfiddle.net/Pre5p/
Depending on your browser support for animations like that you should use transform: translate. You get a much smoother animation...
#menu-container div:hover{
color:#fff;
background-color:#333333;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
I'm very new to coding, but experienced on the computer.
On the following website I'm creating an enlarge-on-hover effect, written in css alone.
LINK: http://3514.linux3.testsider.dk/da/produkter/skumdetektorer
If you take a look in Chrome at the 1st, 4th, 5th, 6th, 7th... images, they have a serious stacking/layer/priotrity problem on hover.
Every browser worked fine one week ago, but suddenly Chrome started acting up...
I had the same problem with all browsers at first, but later on I fixed it by searching the internet and found that a z-index setting was the answer to the 'page-priority' problem.
I tried searching every corner of the internet, with every likely word related to the subject, but have found nothing.
Following is the code used on site:
<style type="text/css">
.hovergallery img {
-webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
-moz-transition-duration:0.5s; /*Mozilla duration version*/
-o-transition-duration:0.5s; /*Opera duration version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
}
.hovergallery img:hover {
-webkit-transform:scale(1.6); /*Webkit:Scale up image to 1.2x original size*/
-moz-transform:scale(1.6); /*Mozilla scale version*/
-o-transform:scale(1.6); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow:30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
z-index:999;
}
</style>
webkit-perspective: and webkit-backface-visibility: are used to stop images in chrome from flickering on hover.
z-index: is used to overwrite pageholder-shadow priority (998 in right side of page), so that images goes over and not under it on hover. As you see when viewing the link in Firefox or any other browser...
Try and add position:relative; to your .hovergallery img
.hovergallery img {
-webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
-moz-transition-duration:0.5s; /*Mozilla duration version*/
-o-transition-duration:0.5s; /*Opera duration version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
position:relative;
}
I had similar problem. I have image gallary and I used opacity, transform and scale effect in hover effect. every image after scaling was becoming transparent and showing other images at background I modified the code based on above discussions and it is pasted below
.gallary{
text-align:center;
}
.gallary_img {
display:inline-block;
}
.gallary_img img{
border: 1px solid #660000;
display:inline-block;
opacity:0.4;
-webkit-transition: -webkit-transform 0.5s ease-in;
**position:relative;**
}
.gallary_img img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
border: 1px solid #660000;
-moz-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
**z-index:999;**
}