I have the following demo: http://jsfiddle.net/EHrk4/2/
Is it possible that #main remains opacity 1 until I hover over the hyperlink, then it goes to 0.3?
HTML:
<div id="main">
hover me to fade out main
</div>
CSS:
#main {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
height:400px;
width:400px;
background:red
}
#main:not(:hover) {
opacity: 0.3;
}
Many thanks for any pointers.
No - your link is inside the element you want to affect, and currently there is no parent selector in CSS2 or in CSS3.
If your anchor was a sibling element of the div, you could affect the div's opacity as you wish - like in this quick jsFiddle example.
Example of affecting sibling in pure CSS:
HTML:
hover me to fade out main
<div id="main">
</div>
CSS:
a:hover + #main {
opacity:0.5;
}
If it has to be inside, I'd recomend using a Javascript library such as jQuery to achieve it.
Or, take a look at the the following answer, which explains a workaround for opacity affecting child elements.
I would do it via jquery personally.
http://jsfiddle.net/EHrk4/5/
JQ
$('#link').hover(function(){
$('#main').addClass('hover');
}, function(){
$('#main').removeClass('hover');
})
CSS
#main {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
height:400px;
width:400px;
background:red
}
.hover {
opacity: 0.3;
}
EDIT:
From our comments, here is how to do it while still preserving the child elements opacity of 1.
http://jsfiddle.net/EHrk4/11/
Yes this is posible for example:
#main,a{
display:block;
height:100px;
width:100px;
}
Make the height,width of the anchor tag same as #main. So when you hover the link it will give you the affect all over the #main. Other wise you can use jquery for this.
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
I want to apply for CSS transition different values on hover in ease-in and ease-out.
Like this,
ease-in: 180ms,
ease-out: 240ms
when I hover it will be 180ms ease-in, but when hovering out it will be 240ms ease-out.
You can use different transition-duration values for the styles affecting your element, for example:
div {
width: 150px;
height: 150px;
background-color: gray;
transition: width 180ms ease-in;
}
div:hover {
width: 300px;
transition-duration: 240ms;
transition-timing-function: ease-out;
}
<div>My Element</div>
For more details please check CSS Transitions
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
Alright this may sound like a complete noob question but I was wondering.
Is it possible to use CSS to do what I am requesting?
The link and code listed below, Makes it to where your menu buttons light up when you hover over them, How ever I am wondering if It's possible to do the same effect with a container full of content..
http://71012.site90.net/
<!DOCTYPE html>
<html>
<head>
<style>
body{ background:#000; margin:0px; }
div#menubar1{ padding: 24px; border:#999 1px dashed; }
div#menubar1 > a{
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
background: #333;
padding: 12px 24px;
color:#999;
margin-right: 10px;
text-decoration:none;
border-radius: 3px;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar1 > a:hover{
background: #6F8A00;
color:#FFF;
}
</style>
</head>
<body>
<div id="menubar1">
ExampleExampleExampleExampleExample
</div>
</body>
</html>
Once again, Sorry if this is a complete noob question, I am just really interested because I enjoy the way this effect looks.
If you're looking for a container to be hovered as opposed to a sibling, you can use the children selectors (>, *, & ) and apply the :hover to the parent
If you're looking to affect the following siblings you can use the sibling selectors (+ & ~) and apply the :hover to the sibling that is before the others
The last option is to do as Chris suggested and apply the same hover event to all elements of the class or type, but this only affects elements of the same class of type
For more information and insight for CSS selectors, this is a GREAT article
You can simply use a class for the effect, and then assign that class to whichever object you would like:
.hover-effect:hover {
background: blue;
}
And your HTML:
Hover
<div class="hover-effect">Same hover effect applied here</div>
I just got into learning CSS3 and HTML5 and right now I'm trying to get my span text to transition into another color when the mouse hovers over the .link div with the following code. For some reason it is not working, I have tried a couple of things to get it to work but no luck so far.
Can anybody help me fix the issue or point me into the right direction?
Thank you!
--
HTML
<div id="celebrity-list">
<header>
<h2>Celebrities</h2>
</header>
<div id="a">
<span class="letter">A.</span>
<div class="links">
</div>
</div>
</div>
CSS
#celebrity-list > div span.letter{
position: relative;
font: 22px Arial;
color: #3a3a3a;
-webkit-transition: color .3s ease-out;
-moz-transition: color .3s ease-out;
-o-transition: color .3s ease-out;
-ms-transition: color .3s ease-out;
transition: color .3s ease-out;
}
#celebrity-list > div .links:hover #celebrity-list > div span.letter{
color: #b43838;
}
#celebrity-list > div .links{
position: relative;
width: 190px;
height: 342px;
background: #f2f2f2;
-webkit-transition: border .3s ease-out;
-moz-transition: border .3s ease-out;
-o-transition: border .3s ease-out;
-ms-transition: border .3s ease-out;
transition: border .3s ease-out;
}
At first, your CSS selectors are incorrect. The x > y selector only selects direct children. Both span.letter and div.links are no direct children of #celebrity-list so will not be selected by these selectors. The ">" may be removed in this situation. Next to that, an ID should always be unique.
This is not working at all:
#celebrity-list > div .links:hover #celebrity-list > div span.letter{
color: #b43838;
}
You are trying to select span.letter, as a child of a div, as a direct child of #celebrity-list, as a child of .links:hover, as child of a div, as direct child of #celebrity-list.
If you want to change span.links text color you should put this element after the div#links and select it as follows:
div.links:hover + span.letter { /* your CSS */ }
Another option is to put span.letter inside div.links (as a direct child) and use the following selector:
div.links:hover > span.letter { /* your CSS */ }
If you really want to leave span.letter before div.links in your HTML you should use javascript to accomplish the result wanted.
it is because div.links is a sibling of the span.letter
your selector must be a parent of the markup you might want to apply a style.