jquery/css fill circle image сверху вниз

Question

Ive пытался достичь аналогичного эффекта, который можно увидеть в разделе портфолио этого сайта: http://www.richdean.co.uk/, когда вы наведите указатель мыши на изображение. Я честно пытаюсь понять, как он это сделал, и это, вероятно, довольно просто, любая помощь будет оценена по достоинству.

Спасибо, Miles

Answer 1

Вы можете сделать это следующим образом: DEMO

<div class="circle" id="circ1"> 
    <div>+<br>VIEW PROJECT</div> 
</div> 

<div class="circle" id="circ2"> 
    <div class="cover">+<br>VIEW PROJECT</div> 
</div> 

CSS:

.circle{ 
    position:relative; 
    width:250px; 
    height:250px; 
    float:left; 
    margin:20px; 
    background:transparent none no-repeat center center; 
    background-size:cover; 
    border-radius: 50%; 
    overflow:hidden; 
} 
#circ1{ 
    background-image: url('bg1.jpg'); 
} 
#circ2{ 
    background-image: url('bg2.jpg'); 
} 

.circle > div{ 
    position:absolute; 
    height:50px; 
    padding:100px 0; 
    width:100%; 
    text-align:center; 
    top:-250px; 
    background:#fff; 
    transition: top 0.5s; 
    -webkit-transition: top 0.5s; 
} 
.circle:hover > div{ 
    top:0; 
} 

Основная идея состоит в том, чтобы иметь relative positioned круглый элемент с внутренним absolute pos. элементом изначально позиционируется в некоторых - верхнее значение.

Круглый элемент требует свойства overflow:hidden, чтобы скрыть внутренний элемент белого цвета.

Для анимации вы можете не использовать JS/JQuery или CSS3

Answer 2

Что вы можете сделать, это сделать круг из DIV с помощью border-radius:

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
} 

Затем добавить overflow:hidden к кругу. Сделайте div, который является дочерним по кругу, и установите его top смещение на -100% так, чтобы оно было вне поля зрения и над кругом. Используйте jQuery .animate(), чтобы переместить верхнюю ориентацию на 0% так, чтобы она заполнила круг. Вы также можете использовать css transitions для перемещения внутреннего div вниз с помощью :hover.