En esta nueva aventura aprenderemos como escalar una
imagen, pero no solamente haremos eso
sino le daremos un estilo para adornar la imagen.
Vayan buscando una imagen de tamaño de 400px de alto y
ancho, háganlo en google y hay un botón que dice herramienta de búsqueda vallan
donde dice tamaño y le dan tamaño exacto.
CSS
*
{
margin: 0;
padding: 0;
}
#container
{
background: #272822;
height:220px;
margin: 50px auto;
padding-top: 10px;
width:220px;
}
.contenfoto
{
background: url(fescalar.jpg);
opacity: 0.3;
background-size: 600px 600px;
background-repeat: no-repeat;
background-position: center center;
border-radius: 200px;
height: 200px;
margin: 0 auto;
width: 200px;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.contenfoto:hover
{
background-size: 200px 200px;
opacity:1;
}
.contenfoto:hover .texto span{
margin-right: 0;
}
.contenfoto .texto
{
color: #fff;
font-family: verdana;
font-size: 15px;
font-weight: bold;
padding: 86px 0 0 0;
text-align: center;
overflow: hidden;
text-shadow: 1px 1px 2px blue;
}
.contenfoto .texto span
{
margin-right: -400px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
INDEX
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Escalar imagen</title>
<link rel="stylesheet" href="estilo11.css">
</head>
<body>
<div id="container">
<div class="contenfoto">
<div class="texto">
<span>
PortalWordpress
</span>
</div>
</div>
</div>
</body>
</html>
No hay comentarios :
Publicar un comentario