How do i mask images on hover? - javascript

I have 9 images aligned in 3 rows. Each row has 3 images.The images popup on hover. Except the image which popups the rest of images should be darkened. Since i have yellow background if i try to reduce opacity of the images , the images appear dim yellow . So i can't reduce opacity. Any other solution . Please help
My Sample Code
<div id="content">
<ul>
<li> <div class="imagHolder"> <img src="my-image.jpg" width="320" height="240"> </div> </li>
< /ul>
</div>
CSS
#content {
background : yellow;
width : 940px;
height : 500px;
}
Even if i set background color black to the wrapper imagHolder , the images appear dim yellow on hover
Jquery code
jQuery(document).ready(function() {
jQuery('.imagHolder').hover (function() {
jQuery('.imagHolder').css({'opacity' : '0.5'});
},
function(){
jQuery('.imagHolder').css({'opacity' : '1.0'});
}
}

You can set background-color: #000 on the image elements -- then you should be able to reduce opacity to darken the images.
As pointed out in the comments, you need to set the background color on a wrapper around the image. Here is a working example demonstrating the technique: http://jsfiddle.net/UWJhM/
The problem with the code in your example is that you're changing the opacity of the wrapper div rather than the opacity of your image. Set a black background on your image wrapper, and then change the opacity of the image only, and you should be fine.
On a side note, JavaScript isn't needed for this effect. You could substitute your jQuery code with CSS rules that change the opacity on hover, and still get the same effect. Again, see the jsfiddle mentioned above where this technique is illustrated.

Tried it the other way? Make a div block on top of the image as such:
<div class="imgHolder">
<img src "image01.jpg" width="100" height="100"/>
<div class="imgMask" ></div>
</div>
of course u have to apply correct css as such:
.imgMask {
width:100px; height:100px; position: absolute; top: 0; left: 0; background-color: #000; display: none;
}
.imgHolder {
position: relative;
}
just .show() the imgMask when necessary :)

Related

onmouseover change image smoothly

I have an image switching with another one when hovering with mouse, it works well, but I want to make it change smoothly.
Here's my code :
<img src="/images/doubleimgindex.png" class="w-100"
onmouseover="this.src='/images/doubleimgindex2.png'"
onmouseleave="this.src='/images/doubleimgindex.png'" />
I can't use div for this purpose, that's why I'm asking for help, is it possible?
If you want to fade between the images, you need to have two images on top of each other and fadein/out the upper one:
.container {
position: relative;
}
.upper-image {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s;
opacity: 0;
}
.upper-image:hover {
opacity: 1;
}
<div class="container">
<img src="https://picsum.photos/id/100/400/300">
<img src="https://picsum.photos/id/200/400/300" class="upper-image">
</div>
In Action: https://codepen.io/theshark/pen/rNVVeLO
The fading can be done completely in css as seen in the example :)
The upper image is positioned on top of the lower image via position absolute and completely transparent. On hover the image opacity is scaled to 1 and the image fades in.
If you have further questions about the code, please don't hesitate to ask :)

Loading An Image Onto Another Using Hover (Javascript)

So as you can tell by the title, I'm trying to load an image above/onto another. It's kind of hard to use with this very amateur setup I have. Basically what I'm trying to do is load an image into the same position as the one that's being hovered. Hard to explain, but I think you might understand.
The code is here: Pastebin.com
What it currently does is create a map of sorts using images. Once hovered over, they dim out and display the realname of the image. What it doesn't do yet is load a new image above the currently hovered-over image if that makes sense. Hopefully someone can help. You can view its current status here: Sinnoh.php
(Scroll right to find some images)
You can have the effect you want by placing the images on top of another, and adjusting their opacity values on hover. A simple transition will give it the fade in/out look you want.
img {
height: 600px;
width: 200px;
}
.alt-img {
opacity: 0;
}
.image-container:hover > .main-img {
opacity: 0;
}
.image-container:hover > .alt-img {
opacity: 1;
}
img {
transition: 1s;
position: absolute;
}
<div class="image-container">
<img class="main-img" src="http://gogojjtech.com/misc/map/route204.png" />
<img class="alt-img" src="http://gogojjtech.com/misc/map/route205.png" />
</div>

How do I change an element with transition with jQuery when hovering on another element?

So I have a list of 9 icons with titles representing 9 different areas of service. Divided into three rows of three using floats etc. Each has a description below it (a couple of paragraphs). I have used 'visibility: hidden' and 'height: 0px' to hide the descriptions. (not at the same time.) I want to hover or mouseover the icon and have the description appear below it.
I don't think I can use straight CSS (unless someone thinks otherwise) because I am triggering one element and changing another.
<div id="category1" class="category_col1 cathead">
<div><img src="images/..." name="category1" class="image-item-lead"/>
<h3>Type of category</h3>
</div>
<div id="category1description" class="hide">
<p>Some content...</p>
<p>Some more content...</p>
</div>
</div>
And we do that two more times per row.
The CSS that is applied to these elements is as follows.
.category_col1 {float:left;
clear:left;
width:32%;
padding:.5em .5em .5em 0em;
}
.image-item-lead {width: 90%;
margin-left:auto;
margin-right:auto;
display:block;
}
.cathead {visibility:visible;
}
.hide {height:0px;
overflow:hidden;
}
The jQuery that I have tried is as follows:
Surrounding all options
$(document).ready(function(){
});
This works:
$('#category1').mouseover(function(event){
$(#category1description).css('height','auto');
});
But obviously it shows up instantly, I would like it to show up gradually.
I have tried:
$('#category1').mouseover(function(){
$('#category1descrioption').slideToggle('slow');
});
$('#category1').mouseover(function(){
$('#category1descrioption').animate({height: auto}, {duration:1500});
});
$('#category1').mouseover(function(event){
$('#category1descrioption').transition({height: auto}, ease, 1500);
});
I am definitely missing something here. I hope someone can help.
All CSS:
.category_col1:hover .hide {
height: 100px;
}
.hide {
height:0px;
overflow:hidden;
transition: height 1.5s;
}
caveat: The set height is due to auto not being supported. If auto is used, the effect is instantaneous instead of transitioned, this is part of the spec. Figure out what height you will need, and use that length value.
Option 2 is to use max-height for height:auto; :
How to animate height from 0 to auto using CSS Transitions article from bradshawenterprises.com
and
SO question CSS transition height: 0; to height: auto;
One way or another, you will have to make some decision on how to deal with height, as the max height method will have some animation timing issues that could lead to big delays on the hover-off if some are small heights, and some are large as the max-height value will determine the animation time. See the comments in the accepted answer.
Option 3: Figure out height of each div with JS/jQuery and set using an event listener for hover

Jquery replacing body background-image with fadeout and fadein effect

I just want to change background-image of body with a fadeOut and replace the second image with fadeIn.
But I get the following error:
Uncaught TypeError: Object url(file:///C:/Users/.../p1bg_cutted.png) has no method 'fadeOut'
$('body').css("background-image").fadeOut('slow',function(){
$("body").css("background-image",
"url(Images/son_componentler/p2bg_cutted.png)").fadeIn('slow')
});
I can change the image without fadein/fadeout but I guess in that case I am making a sytax mistake.
You code fails because $('body').css("background-image") returns a string -- the value of the CSS background image property; not a jQuery object.
Secondly, your code will fade in/fade out the entire body. Background image itself can not be faded.
I suggest that you use an img positioned behind content and fade it.
Instead of fading out the body and then fading it back in. You can get the exact same effect by fading in a masking div that covers the whole screen, change the background-image of the body, and then fading out the masking div. Something like this:
HTML - Add this line anywhere in your HTML
<div id="mask" style="position: absolute; top: 0; left: 0; background: black; display: none;"​​​​​​​​​​​​​​​​​​​​​​></div>​
JavaScript
$('#mask').css({height: $(window).height(), width: $(window).width()})
.fadeIn('slow', function(){
$('body').css('background-image', 'url(Images/son_componentler/p2bg_cutted.png)');
$('#mask').fadeOut('slow');
});​​​​​
See a working example here
UPDATE
In one of my projects I wanted to fade everything to black and then back in with a different image which is what my original code did. If you want to keep the content visible, you don't have to change much. Just have a div in the background with your image. Then apply the masking technique over only your background image.
HTML
<div id="img" style="position: absolute; z-index: -99; top: 0; left: 0;"></div>
<div id="mask" style="position: absolute; z-index: -98; top: 0; left: 0; background: white; display: none;"></div>
JavaScript
$('#mask').css({height: $(window).height(), width: $(window).width()})
.fadeIn('slow', function(){
$('#img').css('background-image', 'url(http://www.jsfiddle.net/img/logo.png)');
$('#mask').fadeOut('slow');
});
See a working example here

Using JavaScript to fade a thumbnail image from grayscale to to color

I'm relatively new to Web development and wouldn't even know where to start in coding a JavaScript that fades a grayscale thumbnail image into a color thumbnail image on mouseover, and vice versa on mouseoff (<--or whatever this is called).
I've looked all over and can't find a script that does this. Is this possible? Could I use jQuery to do this? Other thoughts?
I think all you could do is load two thumbnails into a container at once, with the black and white laying over top of the colour. Then, you could use jquery to fade the opacity of the to thumbnail to 0.0. Here is a working example (it just uses a click to change it once, but I'll leave the mouseover / mouseout to you - you may want to speed up the animation):
some html:
<div class="container">
<img src="blackandwhite.jpg" class="bw" />
<img src="colour.jpg" class="colour" />
</div>
some css:
.container { position: relative; }
.container img { position: absolute; }
.bw { z-index: 101; }
.colour { z-index: 100; }
some jquery:
$(function() {
$(".bw").click(function() {
$(this).animate({ opacity: 0.0 }, 800);
});
});
The best way to do this would be to actually have two versions of the image. One that's grayscale and one that's color. To keep it strictly within javascript and html, I don't believe there's any other way than with the two image method. Flash, Silverlight, and maybe even HTML 5, can do it easily.
Do you really want to fade, or just to swap?
Typically the swap is done via CSS
<a class="btn"></a>
and the CSS
a.btn {
background: url(../images/button-image.png) no-repeat 0 0;
width: 110px;
height: 16px;
margin: 10px 0 0;
}
a.btn:hover {
background-position: 0 -16px;
}
In this case there's a little performance improvement going on where button-image contains both images vertically stacked, and the css is sliding the background image around, but it's the same idea. It's a performance enhancement because the browser only needs to download 1 image, not 2.

Categories