Hover over image, darken background only - javascript

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/

Related

How to trigger some javascript before CSS transition?

I have an element whose width increases when another element beside it is hovered over, i.e.
.div2 {
width: 0px;
display: none;
transition: width 2s;
}
.div1:hover ~ .div2 {
width: 100px;
}
I want to change the display to block on mouseover, but before the CSS transition. Then, similarly, I want to change the display back to none after the CSS transition finishes. I tried using .onmouseover to set the display to block, but it set it after the CSS transition.
Is there any way to set the display to block before the CSS transition?
As I understood your question, You can have two classes one for hidden (display :none) and another for visuallyHidden (may be visibility : hidden). On hover use visualy hidden class to get the css transition in effect(take help of JavaScript to add this class). You must take a help of setTimeout here (10 Ms ) should be fine to add another class which actually implements css transition. when it is un hovered you need to recycle logic again. hope it helps

Picture color overlay in CSS

Hello I have a picture made in photoshop. It's only one color (symbol of html). It's made from #d66a00 (shade of orange) color. I need to add effect on hover, that picture slowly pass to another color.
For example. I have a picture on site, it is orange. When I go with mouse over the picture, he will change from orange to blue. Is something like this possible with CSS3, or javascript, or I will need to use two pictures and change background in CSS?
EDIT In response to your reply:
Then you have three options.
First option is like you suggested to create two images, put them behind eachother and use css to change the opacity of the front image. This method is the worst for page loading time.
The second option is to change the image in Photoshop in such a way so that the dark orange part is transparent (0% opacity) and the light orange part is transparent white, with about 10% opacity.
In css then, put a background on the image of #d66a00. On hover, change this background to blue.
The last option is to use an svg of the image (like https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg)
and to embed it in the html (see http://www.w3schools.com/svg/svg_inhtml.asp) So you copy the entire svg code inside the html. Then you can manipulate all the parts of the svg using css. You can add classes to svg elements, and using css, change their 'fill' (which is background in svg)
first answer:
If I understand correctly, your picture is an rectangle that is uniformly the color #d66a00?
In that case you can create a div with this color as a background, instead of using an image. And then on hover, change the color.
<style>
.orange-rectangle{
background-color:#d66a00;
width:5em;
height:5em;
transition:background-color 200ms;
}
.orange-rectangle:hover{
background-color:blue;
}
</style>
<div class="orange-rectangle"></div>
The way I handle this is by creating two images and hiding/displaying the images on hover.
The image holder div holds the images you want to replace - and when it is hovered over the image with the class defaultImage disappears and is replaced by the image with class hoverImage.
<style>
.imageHolder .defaultImage {
display:inherit;
}
.imageHolder .hoverImage{
display:none;
}
.imageHolder:hover .defaultImage {
display:inherit;
}
.imageHolder:hover .hoverImage{
display:none;
}
</style>
<div class = 'imageHolder'>
<img src = 'path/to/first/image.jpg' class = 'defaultImage'>
<img src = 'path/to/second/image.jpg' class = 'hoverImage'>
</div>

Dynamically repeat/tile div and child(s)?

I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.
Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.
The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.
Here is the css:
#fadediv {
background-image:url(images/buttonback.png);
transition: background-image 0.5s linear;
-moz-transition: background-image 0.5s linear;
-webkit-transition: background-image 0.5s linear;
}
#fadediv:hover {
background-image:url(images/buttonback2.jpg);
}
.fadedivtext {
display:block;
width:320px;
height:138px;
float:left;
font-size:30px;
color:#FFF;
text-align:center;
line-height:138px;
}
And the HTML snippet:
<div id="fadediv" class="fadedivtext">about me</div>
EDIT: Looks like there's a PHP example here that could work, in addition to the javascript example given below.
I think clone should work well for you -- it's not that complicated, especially when you're talking about a basic div. Just make sure to target classes instead of IDs (you're not supposed to have multiple elements with the same ID).
Here's a basic example using JQuery's clone:
var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
var newEl = el.clone();
$("#container").append(newEl);
}​
http://jsfiddle.net/9P7bY/2/
Edit
This is a comment left by aug:
Or if you want to for some reason give each clone a unique id you can access the attribute field and change the id to something else
newE1.attr("id", newId);

How can I affect Opacity of an image whilst hovering a div?

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.

Flexslider - navigation arrow hide until hover

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.

Categories

Resources