Tema: Imagen de sustitución.
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 06/09/2010, 14:54
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Imagen de sustitución.
Supongo que el uso del jQuery no será sólo para ese efecto de sustitución visual de un elemento por otro al /:hover/ y para el desvanecimiento de la transición. Sería como matar moscas a cañonazos.

Ya que la consulta se hace en un foro de css, ya le digo que eso mismo (y con matizaciones también la transición) sería más eficiente lograrlo sólo con css.
A priori, sin intento de lograrlo, no necesitaría más que añadir al selector de esa página
Cita:
.list1 li a:hover img {visibility: hidden;}
Bueno, al final, aquí tiene el código. Respetando el marcado html y el css, con esa línea añadida.
NOTA: sólo a efectos lectivos y como explicación se hace uso del html y css de esa página: All rights reserved © 2009 The Css Website Awards :: CSS Gallery of the most prestigious websites.

Copie, pegue, ejecute en el navegador. Pero lo más importante, estudie el código y vea qué hace qué. Y no olvide el copyright
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6. <style type="text/css">
  7.  * {
  8.     margin: 0;
  9.     padding: 0;
  10.     border: 0;
  11.     outline: 0;
  12.   }
  13. html, body {
  14.   font-weight:normal;
  15.     font-size: 100%;
  16.     height:100%;
  17.     width:100%;
  18.   }
  19. ul {
  20. list-style-type:none;
  21. }
  22. .list1 li.dia {
  23. background:none repeat scroll 0 0 #96BC43;
  24. color:#333333;
  25. }
  26. .list1 li {
  27. float:left;
  28. height:101px;
  29. margin:0 6px 6px 0;
  30. padding:0;
  31. position:relative;
  32. width:171px;
  33. }
  34. .list1 li a {
  35. height:101px;
  36. left:0;
  37. margin:0;
  38. padding:0;
  39. position:absolute;
  40. top:0;
  41. width:171px;
  42. z-index:3;
  43. }
  44. .list1 li.dia a img {
  45. left:0;
  46. margin:0;
  47. padding:0;
  48. position:absolute;
  49. top:0;
  50. z-index:3;
  51. }
  52. a {
  53. color:#9BB725;
  54. text-decoration:none;
  55. }
  56. .list1 li a:hover img {visibility: hidden;}
  57. .list1 li div.txt {
  58. height:101px;
  59. width:171px;
  60. z-index:1;
  61. }
  62. .list1 li div.txt {
  63. height:101px;
  64. width:171px;
  65. z-index:1;
  66. }
  67. .list1 li div.txt span.dia {
  68. font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  69. font-size:33px;
  70. left:19px;
  71. position:absolute;
  72. text-align:right;
  73. top:12px;
  74. width:34px;
  75. }
  76. .list1 li div.txt span.mes {
  77. font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  78. font-size:13px;
  79. font-weight:bold;
  80. left:55px;
  81. position:absolute;
  82. text-transform:uppercase;
  83. top:17px;
  84. }
  85. .list1 li div.txt span.ano {
  86. font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  87. font-size:11px;
  88. font-weight:bold;
  89. left:55px;
  90. position:absolute;
  91. top:31px;
  92. }
  93. .list1 li div.txt span.tit {
  94. color: #fff;
  95. font-family:Arial,Helvetica,sans-serif;
  96. font-size:13px;
  97. font-weight:700;
  98. left:19px;
  99. position:absolute;
  100. top:46px;
  101. }
  102. .list1 li div.txt span.nota {
  103. font-size:33px;
  104. left:15px;
  105. position:absolute;
  106. text-align:right;
  107. top:60px;
  108. width:22px;
  109. }
  110. .list1 li div.txt span.dec {
  111. font-size:13px;
  112. font-weight:bold;
  113. left:40px;
  114. position:absolute;
  115. top:63px;
  116. }
  117. </style>
  118.  
  119. </head>
  120. <body>
  121. <ul class="list1">
  122.  
  123. <li class="dia">
  124. <a href="http://www.thecssawards.com/no-favorite.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1283242122.jpg" /></a>
  125. <div class="txt">
  126. <span class="dia">06</span>
  127. <span class="mes">Sep</span>
  128. <span class="ano">2010</span>
  129. <span class="tit">WEBSITE OF THE DAY</span>
  130. <span class="nota">7</span>
  131. <span class="dec">23</span>
  132. </div>
  133. </li>
  134. <li class="dia">
  135. <a href="http://www.thecssawards.com/made-by-tj.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1282596076.png" /></a>
  136. <div class="txt">
  137. <span class="dia">05</span>
  138. <span class="mes">Sep</span>
  139. <span class="ano">2010</span>
  140. <span class="tit">WEBSITE OF THE DAY</span>
  141. <span class="nota">6</span>
  142. <span class="dec">66</span>
  143. </div>
  144. </li>
  145. <li class="dia">
  146. <a href="http://www.thecssawards.com/johnnybroccolii.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1282549227.png" /></a>
  147. <div class="txt">
  148. <span class="dia">04</span>
  149. <span class="mes">Sep</span>
  150. <span class="ano">2010</span>
  151. <span class="tit">WEBSITE OF THE DAY</span>
  152. <span class="nota">6</span>
  153. <span class="dec">95</span>
  154. </div>
  155. </li>
  156. <li class="dia">
  157. <a href="http://www.thecssawards.com/ines-papert.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1283168669.jpg" /></a>
  158. <div class="txt">
  159. <span class="dia">03</span>
  160. <span class="mes">Sep</span>
  161. <span class="ano">2010</span>
  162. <span class="tit">WEBSITE OF THE DAY</span>
  163. <span class="nota">7</span>
  164. <span class="dec">03</span>
  165. </div>
  166. </li>
  167. </ul>
  168. </body>
  169. </html>
Última edición por kseso?; 06/09/2010 a las 15:02