We Keep Coding

Bring image in front of slick carousel

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
}

Element disappears when animating relative wrapper width with jQuery

I have a strange problem that happens when I animate the width of a relative positioned element which contains an absolute element. While the animation is running, inner element dissapears. When the animation is complete, inner element shows.
Here is the demo:
http://jsfiddle.net/R4Cj5/
When I remove parent element position: relative then inner element is shown while animation is running, but then I can't position it relatively to the parent.
Basically box with the % should be visible al the time
Does anyone have any idea whats happening here?
FIXED : I just added overflow: visible !important; to relative
positioned element
working example : http://jsfiddle.net/R4Cj5/26/

I think it might be a jQuery animate thing. I would love to see a working solution without any hacks, but for now here is something you might find useful! :-)
I basically added another function in the animate, upon completion it will animate the 90% to hover above the progress-bar
complete: function() {
$percent.animate({top: "-26px"})
}
in this use-case scenario, you can also remove/comment out the top: -26px from .progressbar .percent in the stylesheet. Also I added height: 20px; to the styling for .progressbar .percentage so you could see the % change as it glides across.

Nivo Slider Thumbnail / ControlNav not positioning inside slider

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!

Jquery Easy Slider on Open cart v.1.5.1

I'm using Jquery Easy Slider on Opencart v.1.5.1
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
What I'm trying to do is use easy slider for the best seller section of my homepage.
I've copied all files required but I'm having problems with it.
Only 1 image shows when it slides (I think it's because of the UL width but i'm not sure how to set it)
the next and previous arrows are out of place.
Here's the url of the site: http://goo.gl/f4Xi0

span id="nextBtn", its "position" is set to "absolute", right? So its parent div should be set to "position:relative", otherwise its position will be relative to the whole document.
http://www.w3schools.com/css/css_positioning.asp

You need to put .box-product { position: relative; } and then work your way forward with the css to adjust #prevBtn and #nextBtn left values to put the arrows where you want them.
http://www.csspivot.com/p3rn7 - This is after the .box-product { position: relative; } ( note that #prevBtn is still lost but adjust those left values and it will come back.. something like 0px for that maybe and something like 600px for #nextBtn )

div disappearing on margin & width animaton problem - jquery

I have coded my div to re size and change margin on click of a div with id = switch. But it is disappearing on beginning of animation and reappear on the completion of animation. Ypu can see my fiddle here. Why is this happening and how can I avoid this??
Thanks in advance...:)
blasteralfred

Add
overflow: visible !important;
to #sidebar and#switch won't disappear during the animation.

It is happening because it is hidden underneath your "viewer". If you can move your switch inside the "viewer" and float it left, set margin-left. Should fix it.

During the animation the elements overflow is set to "hidden".
As #switch is visually placed outside #sidebar it disappears. Christopher's solution should override it.
It also would'nt happen if you place #switch inside #viewer