Наложение CSS из углов

Question

Я пытаюсь нанести наложение, которое появляется на верхней части изображения, когда вы наведите указатель мыши. В настоящее время я прихожу только с вершины и спускаюсь вниз. То, что я пытаюсь достичь, состоит в том, что наложение разбито на 2 секции, исходящие из верхнего левого и нижнего правого и присоединяющиеся к середине. Я знаю, что это трудно понять только с помощью текста, поэтому я создал изображение.

Я видел это сделано раньше, но я не уверен, что это называется, или как достичь эффекта. Помощь будет оценена

Answer 1

Вот мой удар в нем: http://jsfiddle.net/

Основная идея заключается в том, что вы просто делаете this, но с элементом упаковщика поворачивается. Очевидно, что это решение необходимо проверить на совместимость.

Это может быть достигнуто без элемента .slide, но для этого потребуется большее ручное позиционирование элементов.

Answer 2

Вот базовый пример использования jquery.

Обратите внимание, что классные дети будут делать это с помощью css3.

http://jsbin.com/eyilog/1/edit

В этом примере дивы абсолютно расположены снаружи контейнера элемента. переполнение: скрытый; что они невидимы. На hover jquery оживляет свои позиции обратно в div, накладывая содержимое div.

Чтобы сделать его диагональным, просто используйте прозрачные изображения.

$(".text").hover(function() { 
    $(".topleft").animate({top: "+0px"}, 500); 
    $(".bottomright").animate({bottom: "+0px"}, 500); 
}); 


    <div class="text"> 
    <div class="topleft"></div> 
    text 
    <div class="bottomright"></div> 

    </div> 


.text { 
    background-color:red; 
    width:100px; 
    height:100px; 
    margin:auto; 
    overflow:hidden; 
    position:relative; 

} 
div div { 
    background-color:black; 
    height:50px; 
    width:100px; 
    position:absolute; 
} 
.topleft { 
    top:-50px; 
} 
.bottomright { 
    bottom:-50px; 
}