display none not working on css transition

Question

I am creating an accordion css nav bar and I am having trouble getting the initial image to hide on hover.

I want to to display the large image on hover and hide the smaller one. Righ now I have it using opacity:0; which works, however when I stop hovering over the initial small image it reappears. Any suggestions on how to only display the large image on hover and replace with larger image

CSS and HTML

/* The Magic */
 .accordion .accordion-item:hover .accordion-item-content, .accordion .accordion-item--default .accordion-item-content {
    height: 200px;
}
.accordion-item-content, .accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .25s;
    -moz-transition: height .25s ;
    -ms-transition: height .25s ;
    -o-transition: height .25s ;
    transition: height .25s ;
}
.accordion-item .hover_sm:hover {
    opacity: 0;
   
 overflow: hidden;    
    -webkit-transition: height .25s;
    -moz-transition: height .25s;
    -ms-transition: height .25s;
    -o-transition: height .25s;
    transition: height .25s;
}
/* Aesthetic */
 body {
    background: #fff;
}
.accordion {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    font-family: Arial;
}
.accordion .accordion-item {
    background-image: -webkit-linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    background-image: linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    border-bottom: 1px solid #ffffff;
    color: #eee;
}
.accordion img {
    width:100%
}
.accordion p {
    margin: 0;
}
.accordion .accordion-item:nth-child(1) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(2) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(3) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(4) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(5) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}

<div class="accordion">
    <section class="accordion-item"> <div class="hover_sm"><a href="#" zstep="Intellicenter Solutions" zp="true"><img  src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_sm.png" alt="" /></a></div>

        <div class="accordion-item-content"><a href="#" zstep="About" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item accordion-item" zcondition="Solutions Option=='Intellicenter'" zp="true"><a href="#" zstep="About" zp="true"> <img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Intellicenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Devcenter'" zp="true"> <a href="#" zstep="Devcenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Devcenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Opscenter'" zp="true"> <a href="#" zstep="Opscenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Opscenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Securecenter'" zp="true"> <a href="#" zstep="Securecenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Securecenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_lg.png" alt="" /></a>

        </div>
    </section>
</div>

score 0 · Accepted Answer · answered Apr 04 '15 at 14:27

Change

.accordion-item .hover_sm:hover {

to

.accordion-item:hover .hover_sm {

That way any effect on .hover_sm will remain as long as .accordion-item is being hovered over.

/* The Magic */
 .accordion .accordion-item:hover .accordion-item-content, .accordion .accordion-item--default .accordion-item-content {
    height: 200px;
}
.accordion-item-content, .accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .25s;
    -moz-transition: height .25s ;
    -ms-transition: height .25s ;
    -o-transition: height .25s ;
    transition: height .25s ;
}
.accordion-item:hover .hover_sm {
    opacity: 0;
   
 overflow: hidden;    
    -webkit-transition: height .25s;
    -moz-transition: height .25s;
    -ms-transition: height .25s;
    -o-transition: height .25s;
    transition: height .25s;
}
/* Aesthetic */
 body {
    background: #fff;
}
.accordion {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    font-family: Arial;
}
.accordion .accordion-item {
    background-image: -webkit-linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    background-image: linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    border-bottom: 1px solid #ffffff;
    color: #eee;
}
.accordion img {
    width:100%
}
.accordion p {
    margin: 0;
}
.accordion .accordion-item:nth-child(1) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(2) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(3) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(4) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(5) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}

<div class="accordion">
    <section class="accordion-item"> <div class="hover_sm"><a href="#" zstep="Intellicenter Solutions" zp="true"><img  src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_sm.png" alt="" /></a></div>

        <div class="accordion-item-content"><a href="#" zstep="About" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item accordion-item" zcondition="Solutions Option=='Intellicenter'" zp="true"><a href="#" zstep="About" zp="true"> <img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Intellicenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Devcenter'" zp="true"> <a href="#" zstep="Devcenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Devcenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Opscenter'" zp="true"> <a href="#" zstep="Opscenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Opscenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Securecenter'" zp="true"> <a href="#" zstep="Securecenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Securecenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_lg.png" alt="" /></a>

        </div>
    </section>
</div>

thank you pschueller, that was so obvious. I've been look at the same thing for hours and was overthinking it. — Brandon Huckaby, Apr 05 '15 at 12:17

display none not working on css transition

1 Answers1