I created a carousel/slider of images with slick and now I want to increase the size of an image on hover.
When I try to do that the image is cut-off by the slick container. How can I bring the image to front so I can see the whole thing? I tried using z-index but it doesn't work.
JSFiddle of my code. Here's a screenshot with the problematic hover behaviour.
What I want:
The problem is that slick adding overflow:hidden to the slick-slider class that contains your images.
you can override this by adding this to your css:
.my-slider > div {
overflow:visible;
}
EDIT:
my bad, you should do
.my-slider > div {
overflow-y:visible;
}
so the hidden images will stay hidden.
Overflow being hidden is what's preventing the scaled image from showing entirely. But you can't simply show overflow as this will cause the hidden slides to show.
What you need to do is clone the scaled image outside of the carousel. Here is a working JSFiddle
$(".zoom-it").mouseenter(function(){
var $this = $(this);
var position = $this.offset();
$this.clone()
.addClass('scaled')
.insertAfter($(".my-slider"))
.css({left: position.left, top: position.top});
});
$(document).on('mouseleave', ".zoom-it.scaled", function(){
$(this).remove();
});
With updated CSS
.zoom-it.scaled {
transform: scale(2);
position: absolute;
}
This will clone the hovered image, placing a scaled version on top and removing it when the mouse leaves it.
Another solution that produces the desired functionality is to add padding to the div wrapper slick adds to your outermost carousel container. Just fixed this after hours of struggling with it. Hope this helps someone.
.carousel-class-name > div {
padding: 20px 0px 20px 0px
}
Related
I am using a div that slides out when you click on it.
Here are some images of what I am trying to achieve:
This is the Div, collapsed by default
This is the Div after it is slid out (highlighted)
This is what happens after screen size is changed. The clickable div is present behind content Which I wish to avoid.
My Div's CSS:
.sliderDiv {
z-index: -10;
position: relative;
left: 200px;
width: 240px;
}
I use this command to slide it out on click:
slideItOut:function(){
var divsize=$(".sliderDiv").offset().left-150;
if(divsize>100){
$(".sliderDiv").animate({
"left":"-=194px"
},"slow");
}
else{
$(".sliderDiv").animate({
"left":"+=194px"
},"slow");
}
}
The problem is when you resize, it is not responsive at all and the div actually hides behind other content. Maybe this method is not supposed to be responsive.
Is there a way to make the same "slider" responsive or atleast hold its position while the screen size is changed?
I want to know of any way in which I could resize my window or screen and the div remains in same area as the 1st two images.
Also, this is being implemented in a modal. So its not exactly in a fixed area of the screen.
It won't solve without your full source code, I think. You should give its source code or put somewhere. Then, I try to fix. Or, I can offer optimum way
Here is the fiddle I'm working on: http://jsfiddle.net/fFYqF/
Basically it's a h1 above an h2 with some hidden paragraphs in-between them. This is all contained inside a div which I am trying to make visually centered (horizontally and vertically on the screen. I have used this css on the container div to center it on the page:
div#holder {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height:40%;
width:60%;
min-width:300px;
}
For this to work the width and the height of the div must be specified.
I have 2 problems... first, I don't know the height of the div so I have tried to use jQuery to apply it dynamically:
var h = $('#holder').height();
$('#main').css('height', h + 'px');
Secondly, I have a further bit of jQuery to animate the paragraphs of text open. This changes the height of the holder div thus rendering the earlier calculated height incorrect and the div is no longer vertically centered.
Is there a way to have the holder div always centered on the page? I.e. it should move up when it is opening.
Please see the fiddle above to see what I mean. Thanks
I have updated a branch of your fiddle to use a mixture of using .animate() with the height as well as the top position of the element to make it look like its opening up.
Have you tried the .animate method instead? I haven't tested this in a vertical-centered situation like you're describing, but I've used this method to increase the height of my containers when I'm bringing other elements into view.
$('#main').animate({height: '+='h }, 'slow');
This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!
Not sure if this is a javascript issue or can be solved with CSS.
Im using an image with a text overlay slider but seem to having some issues with where the slider starts on page load. This is the live example, I would like the slider to be hidden on load and appear from below on rollover.
http://www.warface.co.uk/clients/detail-shoppe/directors
Many thanks
You can just add the initial top value to your CSS, like this:
.boxcaption{
top: 240px; /* add this! */
float: left;
....
}
This should give you the initial effect you want, and on hover it'll slide up on the first hover.
Just include this line which sets the inital css so that the two .cover divs are "hidden"
$('.boxgrid.captionfull .cover').css('top', 240);
like this
...
$(document).ready(function(){
$('.boxgrid.captionfull .cover').css('top', 240);
//Full Caption Sliding (Hidden to Visible)
...
i have a menu and on hover i fade a box in. Behind this box i have a small icon and i want to move it in front of the box so you can see it on hover.
Here is my menu > Navigation
I tried it with that jQuery(this).find(".flyer").css("z-index", 10000);
but it stays behind.
How could i manage that problem?
greets Max
z-index only works on positioned elements, so you need to give .flyer a position, like this:
.flyer{
margin: -75px 0 0 0;
width:53px;
height:74px;
position: relative;
}
Here's your example/fiddle edited to work, we're just calling this on hover:
$(this).find(".flyer").css("z-index", 10000);
and this on hover out:
$(this).find(".flyer").css("z-index", "auto");
Make sure that you reference the proper element with the .flyer selector and z-index does not do the trick, try with the zoom attribute.