The page in question:
http://rainbowdoge.000webhostapp.com
The situation:
I have two buttons in the nav menu on the left side.
The upper one contains a hitbox (black for testing purposes), and an image of a rainbow. The image is changing the opacity on hover.
CSS code for that:
.icon {
opacity: 0.6;
backface-visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
.iconHitbox:hover .icon {
opacity: 1;
cursor: pointer;
}
There is also an iframe on the page. The iconHitbox changes the iframe's source on click.
The problem:
If I hover over the top half of the button, the opacity doesn't change, as if a hover isn't even detected.
The solution I could think of:
I thought that maybe something else is getting in the way, but no, the setSrc() function works when I click on the upper half of the button.
This is happening because your #test1, #test2, and #test3 elements are being positioned half way over the rainbow circle. You'll need to move them out of the way.
The div with the id "test3" is overlapping with your icon. You can see it in the dev tools of your browser.
You have absolute set. If you remove absolute then adjust positioning you'll be good.
try:
#mainPageIcon {
background-color: black;
position: relative;
top: 25px;
}
.iconHitbox {
height: 8vh;
width: 8vh;
}
Related
I want my button to move from the left to the right when I click it. I think I have everything I need, but apparently I have either left something out or I'm not put something in the right order. Why won't my box move? Do I need to use JavaScript? The HTML has nothing more than a button with the class name of box.
.box {
width: 100px;
height: 150px;
background: red;
border: none;
margin: 100px 100px;
cursor: pointer;
animation-name: move-right;
}
.box :hover{
background-color: red;
}
.box :active {
transition: all 2s linear;
}
#keyframes move-right {
transform: translateX(350px,0);
}
You will need to use javascript to monitor the click event.
Tips
The animation name should be removed from the .box class.
The hover effect is the same color as the default state, if you want to show that something is happening it cannot be the same color.
The translateX() takes one value, unless you intended to use the translate(X, Y) which takes two values.
When animating you do not use transition timing, animation has it own timing.
I'm working in an Angular 9 app and I need to make an accordion menu. Everything works fine with my code except for the animation of the sub menus. I want to animate the content of a sub-menu item when display is change from'block' to 'none' and also animate it when is changing from 'block' to 'none'.
here is a couple of examples of what I need
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
https://primer.fusepx.com/angular/
I also want to keep the code structure as much as possible. I just really need the content animation
Here is an stackblitz example with my code.
https://stackblitz.com/edit/angular-ivy-t6rbdp
Try this
.content {
padding: 10px;
background-color: blue;
height: 0 !important;
overflow-y: hidden;
transition: height 0.5s ease-in-out;
}
.content-open {
opacity: 1;
height: 100px !important;
}
As display which doest represent numeric values you cant do transition on that. So use properties like height.
I have this page built in DIVI WordPRess:
http://www.wilderfilms.co.uk/wp/work/
When you hover over an image, I want the zoom effect to work - but the image overlaps outside it's div area.
I used the CSS code from here:
https://codepen.io/Remedy/pen/ZYJrpp
my CSS code which doesn't work is here:
.et_portfolio_image img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.et_portfolio_image:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
I use firefox browser and I did right click> inspect element on the image, in order to see what class it's been assigned. I've tried different classes, but this seems to be the closest class that looks like what I'm trying to achieve. I basically want the background image to zoom, but not overlap the way it does and keep within the DIV.
Thanks!
You need to hide any overflow that is caused by the zoom.
Simply add overflow:hidden to the .et_portfolio_image and you are done.
.et_portfolio_image, .et_shop_image {
display: block;
position: relative;
overflow: hidden; }
You have to add some css like below:
.et_pb_portfolio_item {
overflow: hidden;
}
add this style
.et_portfolio_image, .et_shop_image {
overflow: hidden; }
Thank you to all, the code worked perfect, for benefit of answering this post, I used David's answer:
.et_portfolio_image, .et_shop_image {
display: block;
position: relative;
overflow: hidden; }
Thank you, the page looks fantastic now!
I've been trying to create a transition effect where, on hover, a sub menu slides out from underneath the main navigation bar. So far, I've got all the elements in place and wasted HOURS playing around with different methods from various posts, but to no avail.
Here is the JSFiddle.
I'm guessing I'm gonna have to get rid of display: none -> display: block way of hiding the submenu as its no good for transitions but various other methods such as transitioning max-height, opacity, pulling it down from a massive top value etc have failed. With the inflated top value method, the submenu slides over everything rather than under and changing z-index values somehow pushes it behind EVERYTHING while turning the background transparent. Very weird behaviour.
I would greatly appreciate it if someone could explain to me how to go about creating a smooth slide-out transition for the sub-menu.
Thank You
Transforming the scale or transitioning the max-height: 0 is a better option for navigational elements.
JSFiddle
If the initial state of the element is "display: none" it is passed over in the DOM which will hide that element (as well as any children) from assistive technology.
Also, you can use a sibling sectors to select .dropdown, instead of overly nesting elements
Adjacent sibling: .dropbtn:hover + .dropdown_content
Working example:
https://jsfiddle.net/6umr3733/1/
Procedure: we set the value of top for the dropdown to -100%. This puts it out of the screen. We give it a transition value for it to be smooth when it goes down.
.dropdown_content {
line-height: 1;
position: absolute;
top:-100%;
background-color: #fff;
z-index:-10;
width: 120%;
left: -20%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease;
}
When we hover over dropdown, your div goes down by 200%, that is, to its original position.
.dropdown:hover .dropdown_content {
top:100%;
}
Hope I helped, good luck.
You can simply use the transform: scaleY(); attribute to squash the submenu to 0 when hidden, and to 1 when visible.
Check JSFiddle
Just remove the Display attributes, and add a transition, and transform: scaleY(0); transform-origin: 0 0; when is normal, and transform: scaleY(1); when hover to .dropdown_content.
In Webkit, the following fiddle works as expected. That is to say, #navigation's left padding is transitioned properly from 0 to 100px.
In Firefox, the identical code somehow prevents the transition from occuring.
http://jsfiddle.net/threehz/JEMN6/27/
my css:
#navigation {
background: #ccc;
-webkit-transition: padding-left 0.125s ease;
-moz-transition: padding-left 0.125s ease;
transition: padding-left 0.125s ease;
margin: 0;
padding-left: 0;
width: 100%;
}
.fixed #navigation {
padding-left: 100px;
}
.fixed #page-navigation {
position: fixed; // removing this results in #navigation transition working properly in firefox
height: auto;
border-top: 1px solid #000;
width: 100%;
}
It seems it is related to the parent element's positioning changing. As noted above, if I remove position: fixed from the parent element, the transition works in Firefox:
http://jsfiddle.net/threehz/JEMN6/28/
Problem is, for what I am trying to accomplish, the header must become fixed, AND the child padding property must transition, so simply removing the position: fixed is not an option.
Thoughts?
The transition works if you toggle it from Firebug/DevTools. In the other hand:
Using transform: translate(100px) or position: absolute + left: 100px for the li items or
Using a transition delay
don't work. The transition event is not even fired :/ ( http://jsfiddle.net/JEMN6/25/ )
It seems that FF can't handle a simultaneous redrawing of the #page-navigation container (since position: fixed takes it out the document flow) and the #navigation child, so the transition event gets aborted.
As Alex Morales suggests, you could use an animation, but you'd need the opposite one to get a transition when removing the #fixed class.
Introducing a minimal delay through JavaScript is also an option:
$('#toggle').click('on', function() {
$('body').toggleClass('fixed');
setTimeout(function () {
$('#navigation').toggleClass('get-padding')
}, 20);
});
http://jsfiddle.net/JEMN6/26/
Not an ideal solution, though.
This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child.