We Keep Coding

Transition from darkened image to non-darkened on mouse over with CSS/Javascript?

I´m trying to get the inverse effect of this code (jsfiddle-demo):
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
div.hoverText{display = none;}
I mean, I want a html code where its images are darkened and the darkeness disappears «on mouse over» -with a transition.

You just have to invert the opacity values :)
(the "base" background must have opacity < 1, and the ":hovered" background must have opacity = 1)
Here's a fork of you fiddle : http://jsfiddle.net/m1mcb66h/
a.darken img {
[...]
opacity: 0.7;
}
a.darken:hover img {
opacity: 1;
}

I think this should do the trick
instead of
opacity:0.7;
write
filter: contrast(150%);

I am assuming your .html is as follows:
<a class='darken'><img src='image1.jpg'></a>
<a class='darken'><img src='image2.jpg'></a>
I solved it like this:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img{
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img{
opacity: 0.7;
}
div.hoverText{display = none;}
Your last pseudoclass works fine also like this:
a.darken img:hover{
opacity: 0.7;
}
Please, provide .html for future questions.

My hover transition isn't smooth on first try

I have a call to action button made of text that has an arrow > in it. I wanted the arrow to transition smoothly to the right on hover and then go back in place on hover out. Here's the HTML, CSS, and jQuery for the CTA button:
$("#lnkTech").hover(function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateOut");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateIn");
},function(){
$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateIn");
$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateOut");
});
/* CTA Styles */
.divCTA {
background-color: #00AA7E;
padding: 20px 0px;
text-align: center;
width: 12em;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
}
.divCTA:hover {
background-color: #009E75;
}
.divCTA a {
color: #fff;
text-decoration: none;
}
.divCTA a:hover {
color: #fff;
text-decoration: none;
}
.spnCTATxt {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.spnCTATxtArrow {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateIn {
position: relative;
left: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimateOut {
position: relative;
left: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.arrowAnimate {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="divCTA">
<span class="spnCTATxt">Learn More <span class="spnCTATxtArrow" id="lnkTechArrow">></span></span>
</div>
What happens is upon load or refresh, the arrow quickly jumps top the right on first hover, then the transition kicks in on hover out, and on subsequent hovers, the transition works. I would like the transition to work every time, even on the first hover. I've even added the transition CSS to all the containers but I still get the same result.
Please help me fix this :(

the solutions is quite simple , you need to set an initial value to the element to the hover effect would start from this value to the transform value
so add to your css
#lnkTech > .spnCTATxtArrow{
left:0px;
}

jQuery hide().slideDown() does not work when I have CSS animations enabled

I'm new to this.
I used jQuery to make three divs (buttons) slideDown at page load. Then I made them expand a little (downwards) when mouseover'd. This worked well in Safari but not in Firefox. So I changed around a few things.
Now I have CSS animations to make them expand on hover and a jQuery function to make them slideDown on load. But this slideDown doesn't seem to work properly.
HTML:
<div class="header">
<div class="button_container">
<div class="header_button home_button">Back to Home</div>
<div class="header_button projects_button">Projects</div>
<div class="header_button resume_button" >Resume</div>
</div>
</div>
CSS:
.header_button {
display: inline-block;
height: 130px;
line-height: 130px;
width: 300px;
background-color: lightgrey;
color: black;
box-shadow: 0 0 10px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
.header_button:hover {
background-color: lightyellow;
height: 140px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
Some of the stuff has been copy-pasted from all over Stack Overflow. But now I've got the hover-expand thing working.
jQuery:
$(document).ready(function() {
$('.header_button').hide().slideDown('slow');
});
Convenient jsFiddle.

Updated Fiddle
Check this code,
$(document).ready(function() {
$('.header_button').parent().hide().slideDown('slow');
});
Though you hide .header_button it has parent <a> which is still visible.

Sliding Panels sitting underneath content?

This is a follow up on a previous question...I was helped out by Marcatectura (thanks again!) , and this is the example they gave me: http://jsfiddle.net/rt9d5/10/embedded/result/
I decided to change the 'li' elements to 'div' elements, as it works better for my intended design. But as I'm not that well versed in jquery I've done something wrong in trying to get mine to look the same. http://fiddle.jshell.net/faedince/L4L4N/ (Here's a little bit of my code.)
#panelOne:after {
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
content: "";
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
$( '#panelOne' ).click(function(){
$( '#panelOne' ).removeClass( 'clicked' );
$(this).addClass( 'clicked' );
});
The red covers are sitting underneath the white panels, and are too far down the page. As per the example they're supposed to be on top of the white panels. Could someone tell me what I'm doing wrong please?

It looks like you need to add position: absolute to your :after classes (along with the top and left positioning). You can also get away with simplifying your JS a bit. Instead of trying to code for every possible click combination, make one bit of code that can apply to all of them.
Demo Fiddle
CSS: you can replace all of your individual :after css calls with the following.
.bigbox > div:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
}
JS:
$('.bigbox div').on('click', function(){
$('.bigbox div').removeClass('clicked');
$(this).addClass('clicked');
});

Why is css transition not working when adding class using javascript / jQuery?

I have a message box which I want to slide down on click. I do this by adding a css class through Angular (and jQuery in my example). But my CSS transition does not take effect.
Is there any obvious mistake I'm doing?
Here's my fiddle: http://jsfiddle.net/mBKXn/
and my code:
// jQuery
$('.test').on('click',function(){
$('#msgContainer').toggleClass('msgShow');
});
// HTML
<div class="container">
<div id="msgContainer" class="msg">
<p>Message here</p>
<p>T2</p>
<p>T4</p>
</div>
Test text
</div>
<button class="test">Click</button>
// CSS
.container{
position: relative;
height: 200px;
width: 400px;
border: solid 1px #222;
}
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.8s linear;
-moz-transition: height 0.8s linear;
-o-transition: height 0.8s linear;
-ms-transition: height 0.8s linear;
transition: height 0.8s linear;
}
.msgShow{
height: auto;
}

To animate height from 0 to auto you have to use max-height instead:
.msg{
position: absolute;
top: 0;
background-color: #FEEFB3;
max-height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: max-height 0.8s linear;
-moz-transition: max-height 0.8s linear;
-o-transition: max-height 0.8s linear;
-ms-transition: max-height 0.8s linear;
transition: max-height 0.8s linear;
}
.msgShow{
max-height: 1000px;
}
Seems to work: http://jsfiddle.net/mBKXn/3/
Also take a look at this question.

you need to set a defined height. Height:auto won't work as this is the default height value.
see the specs for the height property here:
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
http://jsfiddle.net/mBKXn/7/
.msgShow{
height: 100%;
}

Another (older IE compliant) way to do this is through slideToggle.
Updated Fiddle that works and another Fiddle where I removed some of your transition css and it makes the animation smoother in my opinion.
your code needs a slight change:
$('.test').on('click',function(){
$('#msgContainer').slideToggle('slow');
});
and your class needs a slight change:
.msg{
display:none;
position: absolute;
top: 0;
background-color: #FEEFB3;
height: auto;
width: 100%;
overflow: hidden;
}