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!
Related
I need to create a "record store". I'm very new to CSS and HTML and hardly know anything in JAVA. This is what I need to create.
When the user hovers over one of these featured records, move that record vertically lower and make it become larger. Also, display information about that record that was not previously visible.
Any help is helpful.
Use :hover.
Regarding the information you want to display, you could put them in another div with display: none and change it to display: block on hover using something like #record:hover #content {}.
<div id="record"></div>
#record {
width: 100px;
height: 100px;
background: grey;
}
#record:hover {
position: relative;
top: 10px;
width: 110px;
height: 110px;
}
https://jsfiddle.net/y5j8rhfL/1/
Try this instead
<div class = "record" ></div>
Now the HTML is ready
.record{
/* Whatever style you've applied here is fine */
transition-duration: .5s;
}
.record:hover{
transform: translateY(15px) scale(1.5);
}
The translateY(15px) is to move it down by 15px
While the scale(1.5) is to make it appear bigger
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.
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;
}
I've been messing around with images sliding with hover on a separate page from my main work and it worked like a charm. However, when I transfer it to my main page, it doesn't work, for some reason. I even copy-and-pasted so there should be absolutely no problem going on.
.pictureContainer2 img:hover {
top: 50px;
}
.pictureContainer2 img {
position: relative;
top: 0px;
transition: top .2s ease-in-out; }
And this is how it is in the body.
<div class="pictureContainer2">
<img src="icontag.png"></div>
I'm sorry if this is obvious or just plain silly. I just got into web development.
Thanks for you time.
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.