    {% for project in projects %}
    <div class="project-container">
            <a class="project" href="{{ path('app_project', {'slug':project.slug}) }}"
               style="display: inline-block; width: 100%;">
                <img class="project_picture" src="{{ project.picture }}"
                     style="width: inherit; border: 10px transparent solid;"/>
                <img class="project_animation" src="{{ project.animation }}"
                     style="display: none; width: inherit; border: 10px #{{ project.color }} solid;"/>
                <div class="project-info">
                    <div class="title">
                        {{ project.title }}
                    </div>
                    <div class="company">
                        {{ project.company }}
                    </div>
                    <div class="categories">
                        <em>
                            {% for category in project.categories %}
                                {{ category.label }}{% if not loop.last %}, {% endif %}
                            {% endfor %}
                        </em>
                    </div>
                </div>
            </a>
        </div>
    {% endfor %}
<script type="text/javascript">

    $(document).ready(function () {

        $('.project_picture').on('mouseover', function (e) {
            e.preventDefault();
            var parent = $(this).parent('.project');

            parent.find('.project_animation').show();
            $(this).hide();
        });

        $('.project_animation').on('mouseout', function (e) {
            e.preventDefault();
            var parent = $(this).parent('.project');
            $(this).hide();
            parent.find('.project_picture').show();
        });

    });

</script>