We Keep Coding

show overlay on flexslider control thumb hover

im trying to customize the flexslider (http://flexslider.woothemes.com/thumbnail-controlnav.html) in a way that when a user hovers on a navigation thumbnail to show an overlay with an icon. Something like this http://callmenick.com/_development/image-overlay-hover-effects/
by editing the flexslider js code i managed to add a div
<div class="thumb_overlay"></div><img src="'+s.attr("data-thumb")+'"'+c+"/>":''+t+""
but i couldnt move it to above the image although i set relative positions
http://jsfiddle.net/livewirerules/r4uthech/1/
Any help will be appreciated
Thanks

Just add this to your CSS:
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
If you prefer, here is your fiddle updated:
http://jsfiddle.net/r4uthech/2/
I hope this can help you. :)

flexslider slides not chaning on thumbnail click

im using flexslider to display a slideshow with thumbnails. recently i added a css code to show an overlay when the thumbnail is hovered. But the problem is when i click on the thumbnail nothing happens.
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
but when i remove the content: " "; block it seems to work or else nothing happens when the thumbnails clicked.
Here is a demo of the slider slider demo
Can someone tell me what am i doing wrong?

Try adding :after to the img element, change li:after to img:after

Transition from darkened image to non-darkened on mouse over with CSS/Javascript?

I´m trying to get the inverse effect of this code (jsfiddle-demo):
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
div.hoverText{display = none;}
I mean, I want a html code where its images are darkened and the darkeness disappears «on mouse over» -with a transition.

You just have to invert the opacity values :)
(the "base" background must have opacity < 1, and the ":hovered" background must have opacity = 1)
Here's a fork of you fiddle : http://jsfiddle.net/m1mcb66h/
a.darken img {
[...]
opacity: 0.7;
}
a.darken:hover img {
opacity: 1;
}

I think this should do the trick
instead of
opacity:0.7;
write
filter: contrast(150%);

I am assuming your .html is as follows:
<a class='darken'><img src='image1.jpg'></a>
<a class='darken'><img src='image2.jpg'></a>
I solved it like this:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img{
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img{
opacity: 0.7;
}
div.hoverText{display = none;}
Your last pseudoclass works fine also like this:
a.darken img:hover{
opacity: 0.7;
}
Please, provide .html for future questions.

jQuery mouseover function on multiple elements with a delay

I have 3 spans wrapped in a div. When a user hovers over the dive, I want each span to move slightly to the right, with a delay of .5s between each.
Here is my current code:
$('.library_vid').mouseover(function(){
$(this).find('.lesson_meta span:nth-child(1)').css('margin-right', '30px');
setTimeout(function () {
$(this).find('.lesson_meta span:nth-child(2)').css('margin-right', '30px');
}, 500);
setTimeout(function () {
$(this).find('.lesson_meta span:nth-child(3)').css('margin-right', '30px');
}, 1000);
})
However, currently this just moves the first span, the delay never amounts to anything

$('.library_vid').mouseover(function() {
var parent = $(this)
parent.find('.lesson_meta span:nth-child(1)').css('margin-left', '30px');
setTimeout(function() {
parent.find('.lesson_meta span:nth-child(2)').css('margin-left', '30px');
}, 500);
setTimeout(function() {
parent.find('.lesson_meta span:nth-child(3)').css('margin-left', '30px');
}, 1000);
})
div {
width: 130px;
height: 300px;
}
span {
height: 100px;
width: 100px;
display: inline-block;
}
.span1 {
background-color: green;
}
.span2 {
background-color: blue;
}
.span3 {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="library_vid">
<div class="lesson_meta">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
</div>
</div>
I think the issue was the $(this) nested within your set timeouts. Declaring it as a variable is a common 'cheat'. Also, you said you wanted to move them to the right, but were adding margin on the right

jquery animate Jquery Animate would help out instead of using setTimeout , you can set the time interval or use the default timing intervals ,like the one below slow
// Add your javascript here
$(function(){
$('.library_vid').mouseover(function(){
$(this).find(".lesson_meta").animate({
"margin-right": "30px"
},"slow");
});
});
h1 {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="library_vid">
<span class="lesson_meta">span 1</span>
<span class="lesson_meta">span 2</span>
<span class="lesson_meta">span 3</span>
</div>

you can probably do this with css if that makes it easier for you.
.library_vid:hover .lesson_meta span:nth-child(1) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.library_vid:hover .lesson_meta span:nth-child(2) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.library_vid:hover .lesson_meta span:nth-child(3) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
here is the jsfiddle link
https://jsfiddle.net/jpju2my1/
i dont know how your html is formatted so i just made some stuff up based on what you were describing

Hover effect is under the image

So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>

In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/

.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>

You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>

Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/