I'm so so close to acheiving what I want... but I'm wondering if I've hit the limit of what is possible with css.
If you navigate to http://host17.qnop.net/~gjcwebde/ecocamel/index.php?option=com_content&view=article&id=28&Itemid=49
We have a product slider. I'm trying to get it so that..
1) products start at 100% opacity on load.
2) hover over a product.. and the one you are hovering over stays at 100% opacity, the others all go to say 0.5 opacity (dim down).
I have ALMOST achieved this with css. Yo can see it working, except, when you hover over the description that pops up... the active image goes back to 0.5 opacity. Is it possible to control the opacity of this image, whilst hovering over the popup description? I really really hope so! Failing that... how might I acheive this with js? Looked at some on here, but none really apply to my situation. Hope I've given enough information for you to understand. Cheers!
#containingDiv:hover img { } will affect the img when any of the containing div is hovered over so I would use that if I were you, Ryan's solution will only affect the img if you are hovering over it
I picked up your html and put it in a fiddle. Take a look http://jsfiddle.net/hMW8N/
Anyway, this is all you basically need. I'm over specifying with these selectors, but I'm doing it so you can better understand.
#slider-list-stick-1:hover .slide-index{
opacity: 0.5;
filter:alpha(opacity=50); //ie
}
#slider-list-stick-1 .slide-index:hover {
opacity: 1;
filter:alpha(opacity=100); //ie
}
This should work for the opacity on the images when the user is not hovering.
divName img {
opacity:0.3;
filter:alpha(opacity=30);(IE)
}
And then when they hover (this should include your product info styling to as you have that displayed when hovering.)
diveName img:hover{
opacity:1.0;
filter:alpha(opacity=100);(IE)
}
Also throw in an active class on start so that at least one product is being shown when the page loads
For example:
divName img .activeLoad{
opacity:1.0;
filter:alpha(opacity=100);(IE)
}
Add to your styles this declaration
.slide-index:hover img{
opacity: 1;
}
As other divs are also in the slide-index container - the hover effect will still be applied.
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/
before anything, this is my codepen, I am trying to pretty much hover over that and make it say about me. Ive tried a few things but it is just not clicking.
this is my link
http://codepen.io/willc86/pen/BrEmt
I was hoping someone can help explain to me how to change this to a solid background color (lets say all red) with font white saying "about me"
is it possible w/o JavaScript?
The trick is to apply the hover on something higher up.
You can't hover over something invisible. However, you can hover over the things which hold the invisible item.
So, instead of doing something like:
.hidden:hover { visibility: visible; }
Instead, put it on a parent element, like the li:
li:hover .hidden { visibility: visible; }
Now, when you hover over the li that contains the hidden item, the hidden item appears.
Now it's just a matter of tweaking that container to give you exactly what you want. =)
Currently using Flexslider and would like to be able to hide the navigation arrows which presently appear on right and left side of the image but than have them appear when the user hovers over the image. I remember it being addressed on the old site - muffin one, but cannot find it on woothemes.
Does anyone have an idea on how to change/modify/add info to do this?
Thanks in advance.
You can modify the arrows in the css. If you want the arrows to always be visible you want to change the opacity. It's currently set to 0 which makes it non-visible until hover (the hover opacity is set to 1 which is completely visible). So you want to just make it visible like so:
.flex-direction-nav a {opacity: 1;}
If you then want to change the location of the arrow you will need to simply change the margin. It is currently set to -20px. If you want to make it appear outside the box you will need to make it something like this:
.flex-direction-nav a {margin: -40px 0 0;}
If you did both your css would look like this:
.flex-direction-nav a {opacity: 1; margin: -40px 0 0;}
This would make your arrows always be visible and appear outside the image (to the right and left of the image instead of on top of the image).
You can probably accomplish this via jQuery. In my case I am using FlexSlider for Drupal so I cannot promise that you will have the same CSS selectors, but I hope this code could provide a general idea :)
$(document).ready(function(){$("div.flexslider").hover(function() {
$("a.prev").show();
$("a.next").show();
},
function() {
$("a.prev").hide();
$("a.next").hide();
});})
Good Luck!
P.S. I forgot to mention that you should set your a tag selectors in your CSS to display:none; by default.
I need to slide a background when clicking the "next" arrow, and the "previous" arrow - right now the background is in the #container element - However, that doesnt work - I've tried putting the background on the ul#slider element - But that doesnt work either...
What i need is that the background will be slider as much as the liinside the slider...
Any suggestions on how to do that ?
You can see the project here: http://www.i-creative.dk/Slider/
thx
I've built something like what you're asking for, and it's a total pain.
The problem is, you're talking about having a different background image, the size of the page, for EVERY slide.
2 options are:
1: Have one BIG background image, with all the background aligned horizontally, and animate the css background-position when you change a div, to keep things matching. This ahs the advanatage that only one image needs to be downloaded, but it will be big.
Problems are: you see all the other images if you jump multiple steps at once;
it requires that you use a fixed width;
it's a pain if you want to change the background for just one slide;
Preload the background for the next slide on a div which is a sibling of container but has a higher z-index. Use jquery to slide this over the existing background, from the appropriate side.
The good thing about this method is that you can use css to make the background image always take up the full-width of the screen, or use a bigger imager and have it centred. See here: http://cksk.com for an example.
Long story short, you won't get this working with an off-the-shelf solution, you'll need to get your hands dirty.
Also, you'll need to spend a hell of a lot of time on optimisation.
Try this css...
#slider {
width: 472px; /* divided the width of the background image by 4 (# of panels) */
height: 570px;
list-style: none;
/* start background after the initial cloned panel: 472px to match panel width */
background: transparent url(../images/background.png) 472px 0 repeat-x;
}
/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
background: transparent url(../images/background.png) 0 0 repeat-x !important;
}
/* Make the background visible */
div.anythingSlider .anythingWindow {
overflow: visible !important;
}
The only problem is that the width of the UL is limited, so when you get to the last panel, the background ends, but reappears once you hit the right arrow.