Muy buenas chicos.
Hace tiempo que no tocaba nada de diseño web (4 o 5 años), y me he vuelto a poner manos a la obra utilizando nuevas etiquetas que habia visto por ahí.
El tema es que estoy haciendo unos botones donde utilizo la etiqueta transicion para cambiar la opacidad de una palabra, y cuando esta cambia, la posicion de los div tambien, quedando muy brusco el cambio.
La cosa es que, la "animacion" por asi llamarlo que hace me gusta, pero eso, queda muy brusco. Me gustaria saber si hay alguna manera de que no sea un cambio tan brusco o si no, de que los div no se muevan.
Os dejo el codigo a continuacion (disculpad la de mierda que tiene, aun me queda pegarle un lavado de cara jejejjee)
HTML
Código:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Bienvenidos a mi Web</title>
<link rel="stylesheet" href="estilos.css">
<STYLE TYPE="text/css" MEDIA="screen, projection">
@import url(http://fonts.googleapis.com/css?family=Great+Vibes); </STYLE>
</head>
<body>
<header class="cabecera">
<div class="superior">
</div>
<div class="inferior">
<p><span id="titulo">The Castor</span> <br>Welcome to my Website</p>
<div class="conjunto">
<div id="icon">
<a href="#">
<img src="icon/facebook.png" id="icon"><p id="icon">facebook</p> </a>
</div>
<div id="icon">
<a href="#">
<img src="icon/g_plus.png" id="icon"><p id="icon">g+</p></a> </div>
<div id="icon">
<a href="#">
<img src="icon/twitter.png" id="icon"><p id="icon">twitter</p> </a>
</div>
</div>
</div>
</header>
</body>
</html>
CSS
Código:
html{
height: 100%;
vertical-align: middle;
}
body{
font-family: 'Great Vibes', cursive;
font-size: 30px;
text-align: center;
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
header{
/*margin-top: 28%;*/
}
div.superior{
position:relative;
margin: 0 auto;
height: 50%;
width: 99%;
}
div.inferior{
position:absolute; bottom:0;
margin: 0 auto;
height: 50%;
width: 99%;
}
span#titulo{
font-size: 80px;
}
p{
text-align: center;
}
div.contenedor{
float:left;
}
div#conjunto{
margin: 0 auto;
text-align: center;
/*position: absolute;*/
}
div#icon{
display: inline-block;
margin: 0px 20px 20px 20px;
padding: 0;
width: 50px;
}
a{
text-decoration: none;
color: black;
float: left;
}
p#icon{
opacity: 0;
transition: opacity .6s ease-in-out;
margin: 0;
font-size: 2px;
}
img#icon{
width: 48px;
transition: width .4s;
}
img#icon:hover{
width: 60px;
opacity: 1;
}
div#icon:hover p#icon{
font-size: 25px;
opacity: 1;
}
div#icon:hover img#icon{
width: 60px;
}