I have a page full of DIVs which contain images.
When I mouse over an image I can highlight it or add a shadow to accent it easily by adding class etc but is there a way to dim every other image instead.
DIVs are loaded into DOM and I would like the DIV currently hovered over to retain 100% or 1 opacity and the rest of the DIVs on the page to fade to say 70% or 0.7 when one DIV is highlighted.
Is this possible?
CSS only:
jsBin demo
#parent:hover > div{ opacity:0.6; } /* Fade ALL OUT on parent hover */
#parent > div:hover{ opacity:1; } /* Fade in hovered one */
$('div').hover(function() {
$('div').css({opacity: '0.7'});
$(this).css({opacity: '1'});
}, function() {
$('div').css({opacity: '1'})}
);
I think this should work.
What you can do is use a new div as a 'mask'.
You'd have your image div, with z-index:1; for example.
And you also have another div with opacity:50%; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2;. This black div has to be hidden when the page loads (display:none;).
Using javascript, when you mouseover the image div, the white div should change to z-index:3;, and the black div should change to display:block; or similar.
ADDENDUM:
If you don't want an overlay div, but only want to make the other images opaque, the javascript just needs to change the opacity (you can manage these opacities in classes, and then just use JS to switch between them).
The easiest way to do this is probably:
1) Make a translucent overlay that covers the whole page.
2) Clone your DIV and position it on top of the overlay.
Related
I have a div "whitebox" which is basically a div that should cover my original "stimuli" div. It goes smooth and appears nicely, yet it does not cover the original div but seems to be transparent so that I can still see my original div though it. But I want it to be covered completely.
Apparently 'opacity' does not fix it.
<div id="stimuli"> Just press B and get started... </div>
$("#whitebox").fadeIn("fast").delay(500).fadeOut("fast");
CSS:
#whitebox{
background: #fc3a54;
opacity: 1;
position:absolute;
height: 80%;
width: 70%;
}
Is there a simple trick to fix the transparency issue with my code above, or any other hints?
try using an image with #fc3a54 colour instead of using the background function, you can then use z-index to insure your whitebox is in front
Are you positive #whitebox is covering #stimuli? Also, jQuery fadeIn and fadeOut will toggle the display property so if you start with an element that has display:none and run fadeIn on it it will show it. You can use fadeToggle (https://api.jquery.com/fadeToggle/) as well.
I would like to be able to hover over an image and only the background itself to turn black (with opacity to control how much). I already have have an effect for the image itself when it's on hover, but I would like to add an effect where the background which is white to turn to a darker color. Being able to manipulate it later on with opacity and transition would be best, but I have not been able to find css3 or jquery code that works for this so far to get me to that point. Any help would be appreciated.
html
<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>
css
.template_design2 {
background-image:url(img/template_design2.jpg);
width:740px;
height:280px;
background-repeat:no-repeat;
float:left;
}
.template_design2:hover {
background-position:0 -280px;
}
You need to add a class to your <a>s that contain the background images, so you can target them.
You use .template_design:hover, so to target the first one (since it has no class, but you can use its ID to test it works quickly, then assign all <a>s inside .template_design a class so you can target them all at the same time):
.template_design:hover a#zapzonePoster { opacity: 0.5; }
Here's a fiddle showing how it works:
http://jsfiddle.net/v6aNY/
So once you know that's working, you could then assign a class so it would be more like:
.template_design:hover a.thumbnail { opacity: 0.5; }
... which will target all of them, so you only need one rule to govern it, instead of many.
Here's the same fiddle updated with a class of .thumbnail:
http://jsfiddle.net/v6aNY/1/
I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.
Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.
http://jsfiddle.net/nVuQ2/1/
I've tried messing with the placement of the arrow:
.tri0 {
margin-left: 20px;
margin-top: 5px;
}
but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.
Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?
Your issue happens because of the border of your tris elements. You are displaying different borders in each one of your elements, this will make them appear in different ways.
So basically I set them with the same borders values, the same rotation, and when your page first load it toggles your div and show your first message.
Note that is not necessary to have two different classes to toggle your element state, once that they are equal.
Check in the Fiddle.
Not sure if this is the solution that you wanted. But I hope that helps you.
Thanks.
Try using absolute positioning instead of floating, this way you can ensure the arrows are always aligned in the middle. You'd set parent div to position:relative, and arrows to position:absolute;
The code will look like this -
.slide0, .slide1 {
position:relative;
}
.tri0, .tri1 {
position:absolute;
top:0;
bottom:0;
margin:auto 0;
}
.tri0 {
right:5px;
}
.tri1 {
right:10px;
}
EDIT: Whoops, I realised I didn't compensate for the rotated arrow. Because the 10px border makes it effectively 10px wide, position .tri1 with right:10px instead. Updated code above, and update fiddle here.
Updated Fiddle
I am really struggling with this. I have a small amount of knowledge of coding like this, but more modifying than actual coding.
I am looking for some code to allow me to overlay 2 different layers of PNG images (a door and a door handle) which will then each change to a different image when a link is clicked on the page, e.g. a different handle or a different door style or colour.
#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}
#png2 {
position:absolute;
top:0;
left:0;
z-index:0;
}
The above CSS combined with the below HTML gives me the overlay, it would just be nice to get it in a frame (DIV maybe?) and then for a HTML link to then change the image
<img id="png1" src="aub.png" />
<img id="png2" src="handle1.png" />
position:absolute and z-index css property are your tools
door handle must have supperior z-index than door
use jQuery to the behaviour to change it by clicking a link
Add a wrapper div around the images. Set it to position relative. Give the image you want on top a higher z-index than the one you want on the bottom.
Use the jQuery click function to change the src of the image tag or to show/hide other images.
Assuming you create two links with the classes of .my_link_1 and .my_link_2 to act as the triggers for the images you want to change:
$(".my_link_1").click(function() {
$("#png1").attr('src', 'red.png');
});
$(".my_link_2").click(function() {
$("#png1").attr('src', 'blue.png');
});
Container div contains floated left boxes (equally sized) so it looks like grid. One box has a visible content and hidden one. I want to mouse over and see the hidden content expanded so it stays on top of any other box.
I almost got it working except for the last part - hidden content does not stay on top even with z-index applied.
Here is the sample: http://jsfiddle.net/ZQ63X/
you need the css to be like this;
.item .item-1, .item .item-2{
position:absolute;
background-color:white;
}
.item .item-2{
display:none;
}
.item:hover .item-2{display:block;}
hope I helped
/edit -> this way you dont even need javascript..
Change the styles for .item .item-2 as below.
.item .item-2{
display:none;
position:absolute;
top:0px;
}
Demo
I added background color and z-index for the hidden elements when revealed... Is this what you mean?
http://jsfiddle.net/kmacey1249/ZQ63X/3/