2

i want to create a roll out effect on hover with a CSS transition but it's not working. Does somebody know the solution? I've already tried different things but nothing works.

This is the HTML (bootstrap3):

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 tile" id="past">
    <a href="#" class="item thumbnail">Title
              <span class="mouseover margin1">Blablabla</span>
        </a>
</div>

This is the CSS:

.mouseover{
    display:none;
    height: 0em;
    overflow: hidden;
    transition-property: height;
    transition: all 1s ease-in-out;
}


.thumbnail:hover .mouseover{
    height: 5em;
    display:block;
    }
user3701008
  • 71
  • 1
  • 1
  • 4
  • I had the same issue. The problem is that you can't use display none or it will prevent your transitions from working. This helped me: http://stackoverflow.com/questions/3331353/transitions-on-the-display-property – jme11 Jun 02 '14 at 22:28

0 Answers0