What is the simplest way to keep an effect ongoing after hover - css

Question

I've a h1 text that is very faded on a background. Once you roll over it / hover over the block that it is in, it slowly start to light up until it is completely white. This is great and just like I want it to be. Here's the problem. Once you leave the hover, the color goes back to being faded. I'd like for it to stay white as the whole point of having it faded is that it should not be in your sight until you are hovering past it.
TL:DR / When I hover a h1 it starts to light up, I want the new color to remain after you remove the hover.
The HTML I use
<h1 style="color: #fff;">Sammen flytter vi<br> de digitale grænser.</h1>
The CSS I use
.lovernemarketingtitle h1 {
font-size: 50px;
line-height: 54px;
font-weight: 900;
opacity: 0.5;
}
.lovernemarketingtitle:hover h1 {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
SOLUTION BY PRAVEEN KUMAR
http://jsbin.com/dufarofoto/1/edit?html,css,output

Answer 1

Use transition-delay, but beware, improper use affects the hovered state as well.
a {text-decoration: none; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 3px; line-height: 1; color: #000; transition: all 0.5s linear 2s;}
a:hover {transition: all 0.5s linear 0s; background: #ccf;}
Hover Me<br />
Lights up immediately but goes back after 2 seconds.
ps: There's no opacity: 2.