mover o div com a transição CSS
Estou a usar o seguinte código para mostrar um mergulhador escondido no hover. Estou a usar a propriedade CSS para desaparecer no div escondido. É possível deslizar no div escondido (por exemplo da esquerda para a direita) em vez de desaparecer usando apenas o CSS?
Aqui está o meu código:
HTML
<div class="box">
<a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
<div class="hidden"></div>
</div>
CSS
.box{
position: relative;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: 0;
width: 500px;
opacity: 0;
transition: all 1s ease;
}
.box:hover .hidden{
opacity: 1;
}
14
Author: user1251698, 2012-12-20
6 answers
Algo assim?
E o código que usei:
.box{
position: relative;
overflow: hidden;
}
.box:hover .hidden{
left: 0px;
}
.box .hidden {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
Também posso acrescentar que é possível mover um elment usando {[[1]}, que neste caso poderia funcionar algo como isto - DEMO nr2
25
Author: Christofer Vilander, 2012-12-20 11:05:49
Adicionei os prefixos do fornecedor, e mudei a animação para {[[0]}, por isso você tem opacidade e largura que são animadas.
É disto que estás à procura ? http://jsfiddle.net/u2FKM/3/ 3
Author: wakooka, 2012-12-20 09:19:49
Só para adicionar minha resposta, parece que as transições precisam ser baseadas em valores iniciais e valores finais dentro das propriedades css para ser capaz de gerenciar a animação.
As classes CSS reformuladas devem fornecer o resultado esperado:
.box{
position: relative;
top:0px;
left:0px;
width:0px;
}
.box:hover .hidden{
opacity: 1;
width: 500px;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
opacity: 0;
transition: all 1s ease;
}
<div class="box">
<a href="#">
<img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
<div class="hidden"></div>
</div>
3
Author: Chris A, 2017-10-23 20:28:19
transition-property:width;
Isto deve funcionar. você tem que ter o código dependente do navegador
2
Author: Shamis Shukoor, 2012-12-20 09:08:41
Esta pode ser a boa solução para ti: muda o código como esta pequena alteração
.box{
position: relative;
}
.box:hover .hidden{
opacity: 1;
width:500px;
}
.box .hidden{
background: yellow;
height: 334px;
position: absolute;
top: 0;
left: 0;
width: 0;
opacity: 0;
transition: all 1s ease;
}
1
Author: Surya Adhikari, 2014-03-20 20:12:32