capa que hace de máscara sobre otra

Citar

Escrito el 22 Oct 2012 12:24 am

Muy buenas a todos!

Llevo días dándole vueltas a un asunto que no soy capaz de resolver y mis jefes están a punto de cortarme el cuello ya :shock:

.

Resulta que (a ver si me se explicar bien) necesito hacer una máscara en html como las que se hacen en Flash. Antes de nada os pongo un link de una web donde se puede ve exactamente lo que busco:

http://pendragonproductions.com/work

Cuando se hace rollover en las imágenes se despliega una cajita azul y cuando se hace rollout se oculta. Pues tengo que hacer eso exactamente. En Flash tardo unos 5 minutos en hacerlo, pero tengo que tenerlo en HTML. Supongo que con Javascript tiene que ser fácil, o con el mismo HTML y CSS. La cosa es que se cómo enmascarar el contenido de una capa, y también animarla. La cosa es que no se cómo lograr este efecto. Lo que pensé es que la caja azul está cubierta con una máscara y cuando se hace el rollover en la imagen se desplaza hacia arriba. No se...

A ver si me podeis echar una mano que estoy un poco desesperado (más bien loco, jeje)

Muchas gracias.

Por danivozmediano

16 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 22 Oct 2012 04:04 am

Bueno te dejo un ejemplo de lo que tienes que hacer para lograr ese efecto que tienen esas imagenes de la página que pusiste como referencia. En este Fiddle puedes ver como se hace el efecto.
Juega con los efectos transition que nos da ahora el CSS3, ahí puedes mejorar mucho más el efecto que yo le puse.

Por Ferroandres

21 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Front-end + Back-end Developer

@FerroAndres

Citar

Escrito el 22 Oct 2012 08:11 am

Gracias por la respuesta amigo! Pruebo y te digo

Por danivozmediano

16 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 22 Oct 2012 08:57 pm

Esta seria la forma mas rapida que se puede resolver a mano

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#nota li{
position:relative;
display:block;
width:309px;
height:169px;
overflow:hidden;
}
#texto{
position:absolute;
bottom:-30px;
}
</style>
<script type="text/javascript">
$(function(){
$("#nota img").hover(
function(){
$("#texto").animate({"bottom":"20px"},"slow");
},
function(){
$("#texto").animate({"bottom":"-30px"},"slow");
}
);
})
</script>
</head>
<body>
<ul id="nota">
<li>
<image src="http://pendragonproductions.com/sites/default/files/more_work_images/work-polothai.jpg?1333545332" />
<div id="texto">
adsadsadsadasda
</div>
</li>
</ul>
</body>
</html>

Por alez91

46 de clabLevel

Envíale un mensaje privado Web

Desarrollador Web

@alezala

Citar

Escrito el 24 Oct 2012 09:16 pm

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
#nota li{
position:relative;
display:block;
width:310px;
height:170px;
overflow:hidden;
margin:5px;
float:left;
background:none #ccc;
}

#nota li a{
border:1px solid red;
display:block;
position:absolute;
width:308px;
height:168px;
}

.texto{
position:absolute;
bottom:-30px;
width:280px;
background:#fff;
opacity:0.5;
padding:15px;
}
</style>
<script type="text/javascript">

$(function(){
$(".texto").each(function(i){
var H = $(this).height();
$(this).css({"bottom" :-(

H+20)+'px'});
});

$("#nota a").hover(
function(){
var $texto = $(this).find(".texto");
$texto.animate({"bottom":"0px"},"slow");
},
function(){
var $texto = $(this).find(".texto");
var H = -($texto.height()+20)+"px";
$texto.animate({"bottom":H},"slow");
//$texto.animate({"bottom":"15px"},"slow");
}
);
})
</script>
</head>
<body>
<ul id="nota">
<li>
<a href="#"><div class="texto">adsads adsa da sda</div></a>
<image src="./nivo-slider/demo/images/nemo.jpg" />
</li>
<li>
<a href="#"><div class="texto">adsad s ad sada . Limones asdklfj sdaklfjsdak. Limones asdklfj sdaklfjsdaksda. Lorem ipsum</div></a>
<image src="./nivo-slider/demo/images/toystory.jpg" />
</li>
<li>
<a href="#"><div class="texto">ads ad sad asda. Limones asdklfj sdaklfjsdakn kcn xscn skdvj </div></a>
<image src="./nivo-slider/demo/images/up.jpg" />
</li>
<li>
<a href="#"><div class="texto">ad sad sadsad as asd ksdajklñda</div></a>
<image src="./nivo-slider/demo/images/walle.jpg" />
</li>
</ul>
</body>
</html>

Jeje! Solo curioseando....

Por comicSans

Claber

151 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Oct 2012 03:52 pm

eyyy!

muchas gracias por las respuestas. Para ser sincero la que mas fácil me está pareciendo es la de comicsans, está todo muy clarito. Aunque todo ha sido de gran ayuda. Bicheando por ahí encontré unas cuantas webs interesantes donde explican cómo hacerlo de otra manera. Para el que le pueda interesar aquí dejo los links:

Aquí viene la explicación y el código:
http://serifaddons.com/slidingboxes.html

Y aquí la demo:
http://serifaddons.com/slidingboxesdemo.html

Usa una clase que se llama .boxgrid o algo así. Aunque no lo he entendido muy bien. Alguien sabe algo acerca de esto??

Saludos!

D.

Por danivozmediano

16 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Oct 2012 04:03 pm

ComicSans copio mi codigo hecho a las apuradas y lo optimizo

jajaja, si lo vez no es muy dificil de hacerlo a mano como bien se diria, esa clase que usan en el link que pasaste no es mas que el contenedor de la imagen y el caption jeje

Por alez91

46 de clabLevel

Envíale un mensaje privado Web

Desarrollador Web

@alezala

Citar

Escrito el 26 Oct 2012 04:04 pm

vendria a ser el li que puse en el ejemplo

Por alez91

46 de clabLevel

Envíale un mensaje privado Web

Desarrollador Web

@alezala

capa que hace de máscara sobre otra

Escribe una respuesta rapida