<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>Documento sin título</title>
</head>
<body >
<style type="text/css">
{ margin: 0;
padding: 0;
border: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*font-size:100%;*/
/*font-family:"Lucida Sans";
/*font: inherit;
/*vertical-align:middle;*/
}
body{
/*background-color:#696969;*/
background-color:#434343;
/*background-color:#545454;*/
width:1360px;
margin:0px auto;
}
*{margin:0;padding:0}
h1{text-align:center;height:50px;line-height:50px;}
header nav{height:40px;background:#000;width:1360px;}
header nav ul{display:table;margin:0 auto}
header nav ul li{list-style:none;float:left}
header nav ul li a:link,header nav ul li a:active,header nav ul li a:visited{line-height:40px;color:#696969;text-decoration:none;padding:0 20px;display: block}
header nav ul li a:hover{color:#fff;}
.fixed{box-shadow:0 0 10px rgba(0,0,0,0.5);position:fixed;top:0;z-index:1000;}
.contenedor{width:990px;margin:20px auto}
.tituloypieza{
width:385px;
margin-right:5px;
height:400px;
float:left;
}
.titulo{
overflow:hidden;
height:318px;
text-align:center;
border: 1px solid #990;
}
.titulo img{
text-align:justify;
/*margin:50px;*/
}
.contenido7{
margin-left:200px;
position:absolute;
float:left;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
}
.contenido7 .hover img:hover{
-webkit-transform: translateX(300px);
-webkit-transition-delay: 0.2s;
-ms-transform: translateX(300px);
-ms-transition-delay: 0.1s;
-moz-transform: translateX(300px);
-moz-transition-delay: 0.1s;
filter: transform: translateX(300px);
-ms-filter: transition-delay: 0.1s;
}
.contenido6 {
width:990px;
height:400px;
position:relative;
float: left;
background-image:url(../../Downloads/katia/solopared2.png);
overflow:hidden;
/* border: 1px solid #515750;*/
/* box-shadow: 5px 5px 5px #999;*/
}
.contenido6 h3{
margin:25px;
width:250px;
height:300px;
float:left;
overflow:hidden;
}
.contenido6 img{
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.contenido6 img:hover {
/* -webkit-transform: translateX(300px);
-webkit-transition-delay: 0.1s;
-ms-transform: translateX(300px);
-ms-transition-delay: 0.1s;
-moz-transform: translateX(300px);
-moz-transition-delay: 0.1s;
filter: transform: translateX(300px);
-ms-filter: transition-delay: 0.1s;*/
}
</style>
<script type="text/javascript">
$(window).scroll(function()
{ if ($(this).scrollTop() >50)
{ $('nav').addClass("fixed"); $("#contenido").removeClass("hover"); }else{ $('nav').removeClass("fixed"); $("#contenido").addClass("hover"); }
});
</script>
<header>
<img src="../../Downloads/rococo1360.png" />
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios Particulares</a></li>
<li><a href="#">Colaboradores</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</nav>
</header>
<section>
<div class="contenedor">
<div class="contenido6">
<h3> Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al c</h3>
<div class="separador"></div>
<div id="contenido" class="contenido7 hover">
<img src="../../Downloads/katia/soloespejo.png"/>
</div>
</div>
<p>Es un hechu </p>
</div>
</section>
</body>
</html>
: pues bien he hecho las modificaciones k me has escrito y cada vez k le pongo a: .contenido7 .hover img:hover[.. } la imagen se queda quieta. si le quito el .hover, la imagen hace el efecto pero no se cumple la condicion claro.
