CSS3 transition van display:none naar display:block

[HallonRubus]

Ik heb voor de homepage van m'n website een soort teaser tegels gemaakt, en om het wat minder statisch te maken verschijnt er ook een plaatje zodra je over de tegel gaat met de muis. Met wat zoeken en voorbeelden aanpassen heb ik dit redelijk voor elkaar gekregen, maar de laatste hindernis krijg ik er niet uit. Het plaatje verschijnt namelijk onmiddelijk zodra je hovered, maar de animatie is dan nog lang niet klaar, waardoor je dit ziet gebeuren:


Wat ik dus eigenlijk graag wil is dat het plaatje pas verschijnt als de animatie is afgelopen, of dat het plaatje met eenzelfde animatie uitrolt naar volledige hoogte. Is dit op te lossen, bij voorkeur zonder JavaScript?

Test pagina
CSS
relevante stuk CSS;

Cascading Stylesheet:

#teasers h2 {
    color: black;
    text-align: center;
    }
.teaser_tile {
    background-color: #EBECED;
    padding: 0.3em;
    margin-bottom: 1em;
    height: 4em;
    transition: height 0.5s; /* Animation time */
    }
.teaser_tile img {
    display: none;
    transition: height 0.5s;
    transition-delay: 0.1s;
    }

.teaser_title {
    font-weight: bold;
    color: #0C72DC;
    }
.teaser_text {
    font-size: 0.9em;
    }
#teasers a {
    font-weight: normal;
    color: black;
    }
.teaser_tile a:hover {
    font-weight: normal;
    color: black;
    }
.teaser_tile:hover > img{
    margin-top: 1em;
    display: block;
    max-width: 90%;
    }
.teaser_tile:hover {
    height: 23em;
    }

Op regel 14 en 15 heb ik al iets geprobeerd, maar dat werkt dus niet, ook niet als ik het in een wrapper div zet.

En ik test de website vooral in Chrome, dus als het nu helemaal niet werkt, probeer het aub even in Chrome

[ Voor 9% gewijzigd door HallonRubus op 27-06-2015 10:01 ]

[NMe]

Display kun je niet transitionen. Je kan wel dingen doen met visibility of height.

[HallonRubus]

NMe schreef op vrijdag 26 juni 2015 @ 21:50:
Display kun je niet transitionen. Je kan wel dingen doen met visibility of height.

Bedankt. Met visibility werkte het niet (geen verschil):

Cascading Stylesheet:

.teaser_tile img {
    visibility: hidden;
    transition: height 1s;
    transition-delay: 0.1s;
    }
.teaser_tile:hover > img{
    margin-top: 1em;
    visibility: visible;
    max-width: 90%;
    }

Met height werkt het wel, maar dan schaalt het plaatje in alle richtingen uit, als ik het zonder horizontale schaling wil moet ik het in een wrapper zetten neem ik aan?

Je hebt me in ieder geval weer op weg geholpen.

[NMe]

Die height zou je inderdaad op een container moeten zetten. Als daar ook overflow: hidden op staat dan ben je al een heel eind. Hou wel in het achterhoofd dat de height "auto" niet te transitionen valt.

[ Voor 21% gewijzigd door NMe op 26-06-2015 22:30 ]

[Room42]

sdk16420 schreef op vrijdag 26 juni 2015 @ 22:11:
Met height werkt het wel, maar dan schaalt het plaatje in alle richtingen uit, als ik het zonder horizontale schaling wil moet ik het in een wrapper zetten neem ik aan?

Je zou hem ook uit kunnen laten vouwen, als dat acceptabel is:

Cascading Stylesheet:

.teaser_tile img {
    width: 90%;
}

[HallonRubus]

NMe schreef op vrijdag 26 juni 2015 @ 22:29:
Die height zou je inderdaad op een container moeten zetten. Als daar ook overflow: hidden op staat dan ben je al een heel eind. Hou wel in het achterhoofd dat de height "auto" niet te transitionen valt.

Top, werkt perfect nu: http://homepage.tudelft.nl/p9t69/test/test.html

Cascading Stylesheet:

.teaser_tile .img_wrapper {
    height: 0px;
    width: 90%;
    transition: height 0.6s;
    overflow: hidden;
    margin: auto;
    width: 90%;
    padding-top: 1em;
    }
.teaser_tile:hover > .img_wrapper{
    height: 270px;
    }

Room42 schreef op vrijdag 26 juni 2015 @ 22:36:
[...]

Je zou hem ook uit kunnen laten vouwen, als dat acceptabel is:

Cascading Stylesheet:

.teaser_tile img {
    width: 90%;
}

Ik vond dat er wat minder uitzien.

[ Voor 15% gewijzigd door HallonRubus op 27-06-2015 10:02 ]

[Damic]

Je img volgt niet goed als die terug inschuift.

[HallonRubus]

Damic schreef op zaterdag 27 juni 2015 @ 10:06:
Je img volgt niet goed als die terug inschuift.

Ja, zag het net ook, maar als ik de img transition ook op 0.5 seconde zet (net als de div) dan valt hij er iig niet buiten meer. Maar wie weet hoe je dat helemaal kunt oplossen mag het zeggen.

[Damic]

Dat weet ik niet ik zien wel dat er 2x width in .teaser_tile .img_wrapper { staat