cup_of cup_of - 3 months ago 14
CSS Question

How to disable css transition for specific line of css?

Hello I have a div that is set to a fixed height, and when you hover over it, it grows by a certain amount.

I also have it set so when you hover over the div, the background color changes as well.

Right now the hover transitions the height AND the background color. Is there any way to disable the transition for just the background color? The background color transitions with the height, it fades from black to white with the height change. I dont want the background color to fade.

HTML:

<div class="box">
<p class="text">text text text</p>
<p class="content">text text text text</p>
</div>


CSS:

.box {
background-color: #000;
width: 200px;
height: 300px;
position: relative;
top: 80px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.box:hover {
height: 300px;
background-color: #fff;
top: 40px;
}


Here is the jsFiddle link

Answer

I don't really understand the question but is this what you want?

.box {
    background-color: #000;
    width: 200px;
    height: 300px;
    position: relative;
    top: 80px;
    -webkit-transition: max-height 0.10s ease;
    -moz-transition: max-height 0.10s ease;
    -ms-transition: max-height 0.10s ease;
    -o-transition: max-height 0.10s ease;
    transition: max-height 0.10s ease;
}
Comments