Ho provato a sperimentare un po col tuo codice in maniera tale da capire ciò che ancora non conosco... In realtà non so bene cosa ho capito...
Andando per ordine:
.tutto:after dovrebbe inserire un elemento dopo .tutto. Quindi modificando questo in .tutto:before l'elemento in questione dovrebbe essere inserito prima degli altri contenuti. A noi in realtà cambierebbe poco in quanto la posizione di .txt cambia a seconda se il mouse sia sopra o meno.
Volevo però provare a far comparire gli elementi non da sotto ma da sopra e ho modificato il codice in questa maniera:
codice:
<head> <title>Esempio</title>
<meta charset="utf-8">
<style>
html,body{
margin: 0;
padding: 0;
background: #445;
}
.tutto{
width: 900px;
position: relative;
margin: 0 auto;
background: gold;
}
.tutto:before{
content: '';
display: block;
clear: both; /* Interrompe l'effetto del float applicato ai box. Evita che il contenitore collassi su se stesso */
}
.box{
width: 280px;
height: 280px;
margin: 10px;
float: left;
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 2px rgba(0,0,0,.1);
transition: .4s;
}
.img{
position: relative;
width: 100%;
height: 100%;
background: #ffe;
}
.txt{
position: relative;
left: 0;
top: 0;
height: 40px;
opacity: 0;
color: #003;
background: rgba(200,150,0,.3);
text-align: center;
transition: .4s;
}
.box:hover>.txt{
top: -40px;
opacity: 1;
}
.box:hover{
box-shadow: 0 0 6px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="tutto">
<div class="container">
<div class="box">
<div class="img">
</div>
<div class="txt">
Ciao Ragazzi!
</div>
</div>
<div class="box">
<div class="img">
</div>
<div class="txt">
Funziona?
</div>
</div>
<div class="box">
<div class="img">
</div>
<div class="txt">
Prova
</div>
</div>
<div class="box">
<div class="img">
</div>
<div class="txt">
Uno
</div>
</div>
<div class="box">
<div class="img">
</div>
<div class="txt">
DUE
</div>
</div>
<div class="box">
<div class="img">
</div>
<div class="txt">
TRE
</div>
</div>
</div>
</div>
</body>
</html>
Il problema è che non cambia nulla.
Ti spiego cosa avevo nella mente in maniera tale da capire dove sia il mio errore e di conseguenza correggerlo...
In teoria modificando l'attributo bottom con top dovrei spostare il punto di ancoraggio [la distanza dell'origine del div] da sotto a sopra. Di conseguenza impostandola a -40px [va in giu non in su] non dovrebbe comparire da sopra?
Credo di aver sbagliato qualcosa...
Rispondi quotando
. Scusa per l'eventuale confusione creata.
