Brighten images from dark to light on hover - javascript

I'm looking for a script of some sort that will select all images on a page within a certain div.class, apply a transparent black shadowing to it, and then fade it out on hover. Does anyone know of a system of doing this? I can't really modify the site itself (http://cargocollective.com/maureengriswold) or I'd have figured out some shoddy way of doing it already.

Typically you would do this by putting a black background behind your images and the set the opacity of the images to some value < 1.
On your site, you would add the following CSS:
.cardimgcrop {
background-color: black;
border-color: white;
}
.cardimgcrop img {
opacity: 0.7;
}
.cardimgcrop img:hover {
opacity: 1;
}
UPDATE:
If you want an animated fading, you would leave out the :hover CSS definition and add the following Javascript lines (using jQuery 1.4.2 as already used on your site):
$(document).delegate('.cardimgcrop img', 'mouseover', function() {
$(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
$(this).fadeTo(500, 0.7);
});
Of course you could also native CSS transitions instead for this effect (as suggested in Howard's answer), but you would need to take care of browser capabilities.

Not entirely sure what you mean by transparent black shadowing, but I think you mean an effect like a veil over it, which lifts on hover and returns on mouseout?
You can probably achieve this effect entirely using css. Something like this:
DIV.myClass{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(0,0,0,0.6);
}
DIV.myClass:hover{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(255,255,255,1);
You'll want to play around with the exact CSS to achieve the effect you want, and also you'll want to test in various browsers as CSS transition support is not 100%.
You can read more on CSS Transitions at the MDN documentation site.

CSS filters are another option http://html5-demos.appspot.com/static/css/filters/index.html

Related

How to add a hover delay on a menu for a Volusion site?

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com
So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:
I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.
Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.
I do have access to the main html, css and js files.
I will be glad to provide more information if needed.
Please help. Thanks!
UPDATE:
First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.
Just added this code into my CSS file and it worked perfectly:
.vnav__subnav, .overlay{
transition: opacity 0.2s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
transition-delay: .5s;
}
Again, thanks Adam for the prompt response.
Try something like this
(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)
<style>
a{
color:black;
transition:color 0s;
transition-delay:0;
}
a:hover{
color:red;
transition-delay:0.5s;
}
</style>
Well i wanted to show you generic usage.
You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)
<style>
.vnav__subnav, .overlay{
transition: opacity .5s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
}
</style>
This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)

Stop jQuery hover effect when element is not hovered anymore

My script:
$(window).load(function(){
$(".inner").hover( function (e) {
$(this).find(".info").stop().fadeIn(410);
}, function() {
$(this).find(".info").stop().fadeOut(410);
});
});
When I mouseover the div .inner it will play the animation but when I quickly mouse out and mous in again it will stop on the place where I mouse out it, to make it easier.
http://www.sakesalverda.nl/projects/ and hover on a website image and quickly mouse out and hover the image of the website again and you will see it will not fully make the animation
There surely is a jQuery solution, but I would use CSS for this, it's much easier and im most cases the performance is better:
.inner .info {
opacity: 0;
-webkit-transition: opacity .42s;
transition: opacity .4s;
}
.inner:hover .info {
opacity: 1;
}
Works on all major browsers, but IE8 would need a fallback. One downside is, that IE8 and IE9 won't have the fading effect, but in my opinion, thats a death we can afford to die, as those browsers are at only 5% these days. And the showing / hiding will work, just not as nicely as with modern browsers.

how to make an image "coming" to foreground

My goal is to show an image and bring it slowly to the foreground (and extend it in the main time). I wish this can be done when I detect the event onmouseover on a div/img.
Currently, I use the hidden attribute but I dislike it because it's like: appear/vanish, without transitions.
I hope there were a solution with a CSS/CSS3 attribute which will do that. But I found none. I try something with the animate. but it hardly failed.
Do somebody know how to do such of thinqs? I'm using basic html/css/js but I can use bootstrap (if it has a good solution).
Thanks.
You can achieve this with CSS transition and transform. You could use the scale function. Here's something you can play around to get what you want:
http://jsfiddle.net/v2kHU/1/
img{
transition: all 1s;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
}
Edit:
If you want it to be hidden at the beginning then fade in and scale, you could play with the opacity:
http://jsfiddle.net/v2kHU/2/
img{
transition: all 2s;
opacity:0;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
opacity:1;
}

Jquery and IE8 animate opacity solution

I am trying to animate opacity with Jquery an it is working fine in every browser except, you guess it dreaded IE8! Problem: on animation I am seeing some ugly artifacts:(
I know that I can solve this by removing background and adding the same background color to my animated div and to my container div,but it is NOT an option in my case. Can somebody suggest solution to this?
My code:
$(document).ready(function() {
$(".img").animate({
opacity: 0
});
$(".glow").click(function() {
$(".img").animate({
opacity: 1
}, 5000);
});
});
By adding IE filters to my CSS I have partially solved this issue (much better now and no black halo).
Lost whole day with this so I hope it will help someone more fortunate than me:)
.img{
display:block;
width:230px;
height:300px;
owerflow:hidden;
position:relative;
outline:none;
/*Notice (ugly) IE filter here and Source to my PNG image */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.robertpeic.com/glow/glow.png) alpha(opacity=0);
background:none;
margin:0px auto;
padding-top:10px;
}
That's what you get when you change opacity of the images with alpha transparency in IE7 and IE8. There is another question about the same IE GIF/PNG Transparency issue with jQuery

CSS3 Multiple Transitions of the Same Element

I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete.
The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.
Here's my code:
ul#nav li a {
/* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
background: url(images/drape2.png) 0px -149px no-repeat;
/* CSS3 transitions */
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}
ul#nav li a:hover {
/* Action to do when user hovers over links */
background-position: 0px 0px; /* make drape appear, POOF! */
background-position: 0px -10px; /* make drape appear, POOF! */
}
Any help would be much appreciated.
You'll want to chain them with commas instead of a new line
For instance:
background-color 500ms linear, color 500ms linear;
Using cubic-bezier like this:
cubic-bezier(0, 0.35, .5, 1.3)
You can make an animation go backwards—or bounce a little.
Demo (Only works in Firefox)
Source
Edit: I also made you a Webkit only option, I don't know how compatible these two techniques are. It may also work in Firefox with the -moz browser prefixes, but I haven't tested it. This one uses keyframe animation as opposed to transitions.

Categories

Resources