Tengo el siguiente código:
<! DOCTYPE html>
<html lang="es">
<head>
<title>hover imagen</title>
<style>
body{font-family: Arial,serif;}
.clear{width:100%;clear:both;}
/*Estilos Base*/
.contenedor-img {
max-width: 300px;
max-height: 200px;
float: left;
overflow: hidden;
position: relative;
/*text-align: center;
cursor: default;*/
background: #fff;
}
.contenedor-img .mascara{
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.contenedor-img img {
display: block;
position: relative;
}
/*Ejemplo 2*/
.ejemplo-2 img {
transition: all 0.2s ease-in;
}
.ejemplo-2 .mascara {
background-color: rgba(1,192,225,0.8);
width: 300px;
padding: 60px;
height: 300px;
opacity: 1;
transform: translate(300px, -200px);
transition: all 0.5s ease-in-out;
}
.ejemplo-2:hover .mascara {
opacity:1;
transform: translate(-96px, -120px);
}
</style>
</head>
<body>
<div class="contenedor-img ejemplo-2">
<img src="imagenes/imgejemplo.jpg" />
<div class="mascara"></div>
</div>
</body>
</html>
Como expresar los valores que están en pixeles, ¿en porcentajes?