In the following example I am trying to get the pop out "tickets" to show in front of the other doors:
http://codepen.io/anon/pen/EVMXVz
I have attempted to apply a higher z-index on the div.appeal-details when the article is hovered over - I'm unsure why this isn't working:
article:hover .record .jukebox-ticket {
animation: growTicket 0.4s ease-in-out;
display: block;
position: absolute;
top: 150px;
margin: 0px auto;
z-index: 20;
}
My understanding is that the higher z-index combined with absolutely positioning should work - but clearly not.
Keen to avoid JS, but will do if needed.
Thanks!
You may add
position:relative; z-index:1;
to your article and for article:hover higher
z-index:2;
or 10;
Check example: http://codepen.io/anon/pen/zvbdrB
P.S. And than there is no need in javascript part as i can understand.
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 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 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.
This image is a screenshot of the address http://www.rothemcollection.com/engagement-rings/.
The 's' of 'Recommendations' cut by Google Chrome browser. I tried to change the z-index, move it down with the top or margin-top and it still cuts me to the end.
Does anyone have an idea? It could be related to poor I use a special font? If so, what should I do?
Try this css :
#mainSlider h1 span.big {
font-size: 60px;
line-height: 63px;
display: inline-block;
width: 484px;
position: relative;
}
Define your mainSlider Heading position:relative; or define z-index:1;
As like this
#mainSlider h1{
position:relative;
z-index:1;
}
Result is
There is issue, most likely it is related to opacity and css engine rendering, supposely because of some optimization. I would suggest more the header to left by 6 pixels to avoid overlapping of images to it, something like this.
#mainSlider h1 {
left: -6px;
position: relative;
...
There's a few ways to do this - I'll add my view to the mix. Try adding z-index:-1; to the .ring class. This will produce problems if you want to make the images links at some point, but should work in your current setup.
#mainSlider .ring{
position: absolute;
right: 0;
z-index:-1;
}
I reduced the text size by one pixel and problem solved.
Not a suboptimal solution but still works. Unfortunately, the solutions did not help.
Thank you all.
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.