Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Cambio de color de imagen en hover

 Estas en el tema de Cambio de color de imagen en hover en el foro de CSS en Foros del Web. Buenas Tardes a todos. El problema es el siguiente, tengo una tabla y dentro imágenes todas las imágenes son circulares, quiero que estás imágenes que ...
  #1 (permalink)  
Antiguo 29/04/2015, 13:10
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Pregunta Cambio de color de imagen en hover
Buenas Tardes a todos. El problema es el siguiente, tengo una tabla y dentro imágenes
todas las imágenes son circulares, quiero que estás imágenes que están en blanco y negro
al pasar el cursor en hover, cambien de color a celeste, hice la prueba con una de las imágenes pero tiene un par de errores que no puedo solucionar dejo el código y espero su aporte, gracias

html.

<table class="primeratabla">
<tbody>
<tr>
<td><a class="bluecircle" href="#"><img width="150px" height="150px" src="circulosdecolor/1full.png"/><div id="circulo"></div></a><img width="150px" height="150px"src="circulosdecolor/2full.png"><img width="150px" height="150px"src="circulosdecolor/3full.png"><img width="150px" height="150px"src="circulosdecolor/4full.png"><img width="150px" height="150px"src="circulosdecolor/5full.png"><img width="150px" height="150px"src="circulosdecolor/6full.png"></td>
</tr>
<tr>
<td><img width="150px" height="150px"src="circulosdecolor/7full.png"><img width="150px" height="150px"src="circulosdecolor/8full.png"><img width="150px" height="150px"src="circulosdecolor/9full.png"><img width="150px" height="150px"src="circulosdecolor/10full.png"><img width="150px" height="150px"src="circulosdecolor/11full.png"><img width="150px" height="150px"src="circulosdecolor/12full.png"></td>
</tr>
<tr>
<td><img width="150px" height="150px"src="circulosdecolor/13full.png"><img width="150px" height="150px"src="circulosdecolor/14full.png"><img width="150px" height="150px"src="circulosdecolor/15full.png"><img width="150px" height="150px"src="circulosdecolor/16full.png"><img width="150px" height="150px"src="circulosdecolor/17full.png"><img width="150px" height="150px"src="circulosdecolor/18full.png"></td>
</tr>
<tr>
<td><img width="150px" height="150px"src="circulosdecolor/19full.png"><img width="150px" height="150px"src="circulosdecolor/20full.png"><img width="150px" height="150px"src="circulosdecolor/21full.png"><img width="150px" height="150px"src="circulosdecolor/22full.png"><img width="150px" height="150px"src="circulosdecolor/23full.png"><img width="150px" height="150px" src="circulosdecolor/24full.png"></td>
</tr>
<tr>
<td><img width="150px" height="150px"src="circulosdecolor/25full.png"><img width="150px" height="150px"src="circulosdecolor/26full.png"><img width="150px" height="150px"src="circulosdecolor/27full.png"><img width="150px" height="150px"src="circulosdecolor/28full.png"><img width="150px" height="150px"src="circulosdecolor/29full.png"><img width="150px" height="150px"src="circulosdecolor/30full.png"></td>

</tr>
<tr>
<td><img width="150px" height="150px"src="circulosdecolor/31full.png"><img width="150px" height="150px"src="circulosdecolor/32full.png"><img width="150px" height="150px"src="circulosdecolor/33full.png"><img width="150px" height="150px"src="circulosdecolor/34full.png"><img width="150px" height="150px"src="circulosdecolor/35full.png"><img width="150px" height="150px"src="circulosdecolor/36full.png"></td>
</tr>
<tr>
<td><img width="150px" height="150px"src="circulosdecolor/37full.png"><img width="150px" height="150px"src="circulosdecolor/38full.png"><img width="150px" height="150px"src="circulosdecolor/39full.png"><img width="150px" height="150px"src="circulosdecolor/40full.png">
</td>
</tr>
</tbody>
</table>






CSS.

.primeratabla {position: relative;
margin-left: 100px;
margin-top: 60px;
width: 1200px;}
a.bluecircle {display: inline;}
#circulo {
display: none;
background: rgb(0, 184, 184);
width: 150px;
height: 150px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
-webkit-filter: opacity(90%);
position: relative;
top: -209px;
left: 20px;
overflow: hidden;
}

a.bluecircle:hover #circulo {display: block;
opacity: 0.7; }

img {padding: 20px 20px 60px;}
  #2 (permalink)  
Antiguo 29/04/2015, 13:49
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: Cambio de color de imagen en hover
A ver si entendí bien xd algo así: http://jsfiddle.net/v4zmkku7/1/. En todo caso a ver si me lo puedes aclarar mejor xD.

Edito: al ejemplo que te mande, no le he puesto prefijos css, pero si tienes la última versión de tu navegador, no habría problema.
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #3 (permalink)  
Antiguo 30/04/2015, 10:29
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Siiiii eso mismo! Pero quiero que pase eso en una tabla de nose son como 10 filas de 6 circulos como ese. Me recomendas crear una tabla para eso o tenes otra fórmula, :)
  #4 (permalink)  
Antiguo 30/04/2015, 10:30
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Igual las fotos que tengo ya estan en escala de grises asi que no tendria que poner el filtro
  #5 (permalink)  
Antiguo 30/04/2015, 10:56
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: Cambio de color de imagen en hover
solo basta con poner la misma Clase o ID y se vera igual ;)

http://jsfiddle.net/v4zmkku7/2/
  #6 (permalink)  
Antiguo 30/04/2015, 11:07
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: Cambio de color de imagen en hover
Y los flotamos con "float: left;" y creamos un contenedor para cada 6 círculos.

Demo: https://jsfiddle.net/67kgkm3v/1/embedded/result/ Código: http://jsfiddle.net/67kgkm3v/1/.
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #7 (permalink)  
Antiguo 30/04/2015, 12:13
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Que genialidad! Muchas Gracias :)
  #8 (permalink)  
Antiguo 30/04/2015, 16:10
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Una preguntita nomas, que me da curiosidad, en la etiqueta content, osea, para que sirve y porque quedo vacío solo las comillas?
  #9 (permalink)  
Antiguo 30/04/2015, 16:49
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: Cambio de color de imagen en hover
Content es un atributo css para los pseudo elementos ":before" y ":after", para añadir un contenido de texto, pero si en el :before y :after no queremos poner ningún texto, en este caso un circulo celeste, pues dejamos el "content" vació, pues tiene que estar puesto si o si para que el before o el after se muestren xD.
https://developer.mozilla.org/es/docs/Web/CSS/content
https://developer.mozilla.org/es/docs/Web/CSS/before
https://developer.mozilla.org/es/docs/Web/CSS/after

Te dejo unos ejemplos: http://jsfiddle.net/30qv2b2m/2/.

Saludos!
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #10 (permalink)  
Antiguo 30/04/2015, 17:20
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Ahh, genial, ya me queda claro.. Otra consulta, y esto ya es mas complicado porque no es css ni html, sería jquery o algo por el estilo, quiero que esos circulos en celeste cuando los presione se me abra en la misma ventana la misma imagen en grande que tengo en mi carpeta. Podré conseguir algo por ahi ya hecho o si no es muy complicado puedo hacer el codigo yo sola nose.. Iluminame jaja
  #11 (permalink)  
Antiguo 30/04/2015, 17:43
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: Cambio de color de imagen en hover
Este es bueno: https://html5box.com/html5lightbox/, también está este: http://dimsemenov.com/plugins/magnific-popup/. Puedes buscar "lightbox jquery" en google y tendrás varia otras opciones xD.

Saludos!
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #12 (permalink)  
Antiguo 30/04/2015, 20:46
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 11 meses
Puntos: 208
Respuesta: Cambio de color de imagen en hover
Otra opción es Fancybox, es muy personalizable y funciona perfecto..

Aunque si no son muchas imágenes (para que no te vuelvas loco), podes hacerlo así:

Muestra: http://codepen.io/anon/pen/QbbqzY

Codigo simplificado (un solo item):

Código HTML: 
Ver original
  1. <div class="item">
  2.     <a class="bluecircle" href="#">
  3.       <img width="150px" height="150px" src="http://i.imgur.com/OqoeDR0.jpg"/>
  4.     </a>
  5.     <div class="modal">
  6.       <div class="img-window">
  7.         <img width="400" height="400" src="http://i.imgur.com/OqoeDR0.jpg"/>
  8.         <span class="close">X</span>
  9.       </div>
  10.     </div>
  11.   </div>

Código CSS: 
Ver original
  1. body{
  2.   margin:0;
  3. }
  4.  
  5. .container {
  6.     display: inline-block;
  7. }
  8.  
  9.  
  10. .item{
  11.   display:block;
  12.   float:left;
  13. }
  14.  
  15. a.bluecircle {
  16.     display: block;
  17.     height: 150px;
  18.     position: relative;
  19.     margin: 0px 10px 10px 40px;
  20.     width: 150px;
  21. }
  22. a.bluecircle:before {
  23.     border-radius: 150px;
  24.     content: "";
  25.     position: absolute;
  26.     top: 20px;
  27.     left: 20px;
  28.     width: 150px;
  29.     height: 150px;
  30.     background: none;
  31.     transition: background .2s linear;
  32. }
  33. a.bluecircle:hover:before {
  34.     background: rgba(0, 138, 184, .5);  
  35. }
  36.  
  37. .bluecircle > img {
  38.     border-radius: 50%;
  39.     padding: 20px;
  40. }
  41.  
  42. .modal{
  43.   display:none;
  44.   width:100%;
  45.   height:100%;
  46.   background-color:rgba(0,0,0,.6);
  47.   position:absolute;
  48.   z-index:1000;
  49.   top:0;
  50.   left:0
  51. }
  52.  
  53. .modal .img-window{
  54.   width:400px;
  55.   padding:10px;
  56.   background-color:rgba(255,255,255,.7);
  57.   border-radius:.5em;
  58.   position:absolute;
  59.   top:15%;
  60.   left:-215px;
  61.   margin-left:50%;
  62. }
  63.  
  64. .modal .img-window img{
  65.   border-radius:.5em;
  66.   margin:auto;
  67. }
  68.  
  69. .modal .img-window span{
  70.   position:absolute;
  71.   top:-10px;
  72.   right:-10px;
  73.   background-color:#000;
  74.   color:#fff;
  75.   font-family:Calibri;
  76.   font-weight:bold;
  77.   border-radius:50%;
  78.   padding:.2em .5em;
  79.   border:2px solid #fff;
  80.   cursor:pointer;
  81. }

Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.   
  3.   $(".bluecircle").click(function(){
  4.     
  5.     $(this).siblings(".modal").fadeIn();
  6.     
  7.   });
  8.   
  9.   $(".close").click(function(){
  10.     
  11.     $(this).parents(".modal").fadeOut();
  12.     
  13.   });
  14.   
  15. });


Saludos
  #13 (permalink)  
Antiguo 01/05/2015, 18:58
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Muchisimas gracias a los dos, los voy a probar en cuanto pueda y aviso, me encanta este foro!! jaja
  #14 (permalink)  
Antiguo 04/05/2015, 13:46
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Mardo, según el código que ya veniamos trabajando, osea, por como esta ordenado todo antes de ser una galería jquery.. Como iría el código de ésta galería que te paso a continuación, para que funcione presionando uno de los círculos y aparezca la misma imagen en grande osea otra imagen que ya tengo con las nuevas medidas..
http://dimsemenov.com/plugins/magnific-popup/ - Es la que dice LightBox Gallery
Gracias


HTML

<div id="galeria">

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/1full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/2full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/3full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/4full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/5full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/6full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/7full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/8full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/9full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/10full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/11full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/12full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/13full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/14full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/15full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/16full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/17full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/18full.png"/>
</a>

<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/19full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/20full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/21full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/22full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/23full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/24full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/25full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/26full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/26full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/27full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/28full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/29full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/30full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/31full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/32full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/33full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/34full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/34full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/35full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/36full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/37full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/38full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/39full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/40full.png"/>
</a>
</div>


CSS

#galeria { margin-left: 70px;
margin-top: 60px;
width: 1200px;}

a.bluecircle {float: left;
display: block;
height: 150px;
position: relative;
margin-bottom: 40px;
width: 150px;
padding: 20px;
}
a.bluecircle:before {
border-radius: 150px;
content: "";
position: absolute;
top: 40px;
left: 40px;
width: 150px;
height: 150px;
background: none;
transition: background .2s linear;
}
a.bluecircle:hover:before {
background: rgba(0, 138, 184, .5);
}
a.bluecircle:hover {
filter: grayscale(0%);
}
img {
border-radius: 150px;
padding: 20px;
}
  #15 (permalink)  
Antiguo 04/05/2015, 14:27
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: Cambio de color de imagen en hover
Primero, de este lugar descarga estos dos archivos: "jquery.magnific-popup.min.js" y "magnific-popup.css". Después de descargarlos, en la carpeta de tu web crea una nueva carpeta llamada "magnific-popup" y pones dentro de ella los dos archivos que descargaste.

Ahora llamalos desde el head de tu web junto a Jquery que llamaremos externamente, de esta manera:

Código HTML: 
Ver original
  1. <!-- Magnific Popup CSS -->
  2. <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 
  3.  
  4. <!-- jQuery  -->
  5. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
  6.  
  7. <!-- Magnific Popup JS -->
  8. <script src="magnific-popup/jquery.magnific-popup.js"></script>

Después en el "href" de cada "bluecircle" pondrás la imagen en grade que quieres abrir en lugar del "#".

En seguida, debajo de tu div "galeria" pondrás:
Código HTML: 
Ver original
  1. <script>
  2.     $(document).ready(function() {
  3.     $('#galeria').magnificPopup({
  4.         delegate: 'a',
  5.         type: 'image',
  6.         tLoading: 'Cargando imagen #%curr%...',
  7.         mainClass: 'mfp-img-mobile',
  8.         gallery: {
  9.             enabled: true,
  10.             navigateByImgClick: true,
  11.             preload: [0,1] // Will preload 0 - before current, and 1 after the current image
  12.         },
  13.         image: {
  14.             tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',       
  15.         }
  16.     });
  17. });
  18. </script>

Con eso funcionaria, ahora lo siguiente:

En tu css no necesitas el:
Código CSS: 
Ver original
  1. a.bluecircle:hover {
  2. filter: grayscale(0%);
  3. }

Y el:
Código CSS: 
Ver original
  1. img {
  2. border-radius: 150px;
  3. padding: 20px;
  4. }
Te recomendaría que sea:
Código CSS: 
Ver original
  1. a.bluecircle img {
  2. border-radius: 150px;
  3. padding: 20px;
  4. }

Saludos!

Edito: Para más información esta la documentación official: http://dimsemenov.com/plugins/magnif...mentation.html
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #16 (permalink)  
Antiguo 04/05/2015, 21:32
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
Tengo un problemita no me anda y creo que es por ese nombre que está escrito extraño en el script que dice magnificPopup, yo le puse galeria a la carpeta con los archivos del jquery. El script no va en el header?
  #17 (permalink)  
Antiguo 04/05/2015, 21:47
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Cambio de color de imagen en hover
<link rel="stylesheet" href="magnificpopup/magnificpopup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="magnificpopup/jquerymagnificpopupmin.js"></script>

</head>

<body id="azul">
<div id="contenedor4">
<div id="menu">
<ul>
<li id="diferente">Arquitecto Pepe Peña</li>
<li><a class="blue" href="index.html"> INICIO </a></li>
<li><a class="blue"href="bio.html"> BIO </a></li>
<li><a class="blue"href="#"> PROYECTOS </a>
<ul>
<li class="submenu1"><a class="negroazul" href="residencias.html">RESIDENCIAS</a></li>
<li class="submenu1"><a class="negroazul" href="#">EDIFICIOS</a></li>
<li class="submenu1"><a class="negroazul" href="#">CHACRAS</a></li>
<li class="submenu1"><a class="negroazul" href="#">LOCALES COMERCIALES</a></li>
</ul>
</li>
<li><a class="blue"href="contacto.html"> CONTACTO </a></li>
</ul>
</div>
</div>
<div id="galeria">
<script>
$(document).ready(function() {
$('#galeria').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Cargando imagen #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
}
});
});
</script>
<a class="bluecircle" href="imagenes/1grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/1full.png"/>
</a>

<a class="bluecircle" href="imagenes/2grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/2full.png"/>
</a>

<a class="bluecircle" href="imagenes/3grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/3full.png"/>
</a>

<a class="bluecircle" href="imagenes/4grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/4full.png"/>
</a>
<a class="bluecircle" href="imagenes/5grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/5full.png"/>
</a>

<a class="bluecircle" href="imagenes/6grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/6full.png"/>
</a>

<a class="bluecircle" href="imagenes/7grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/7full.png"/>
</a>

<a class="bluecircle" href="imagenes/8grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/8full.png"/>
</a>

<a class="bluecircle" href="imagenes/9grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/9full.png"/>
</a>

<a class="bluecircle" href="imagenes/10grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/10full.png"/>
</a>
<a class="bluecircle" href="imagenes/11grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/11full.png"/>
</a>

<a class="bluecircle" href="imagenes/12grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/12full.png"/>
</a>
<a class="bluecircle" href="imagenes/13grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/13full.png"/>
</a>
<a class="bluecircle" href="imagenes/14grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/14full.png"/>
</a>
<a class="bluecircle" href="imagenes/15grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/15full.png"/>
</a>
<a class="bluecircle" href="imagenes/16grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/16full.png"/>
</a>
<a class="bluecircle" href="imagenes/17grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/17full.png"/>
</a>
<a class="bluecircle" href="imagenes/18grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/18full.png"/>
</a>

<a class="bluecircle" href="imagenes/19grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/19full.png"/>
</a>
<a class="bluecircle" href="imagenes/20grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/20full.png"/>
</a>
<a class="bluecircle" href="imagenes/21grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/21full.png"/>
</a>
<a class="bluecircle" href="imagenes/22grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/22full.png"/>
</a>
<a class="bluecircle" href="imagenes/23grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/23full.png"/>
</a>
<a class="bluecircle" href="imagenes/24grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/24full.png"/>
</a>
<a class="bluecircle" href="imagenes/25grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/25full.png"/>
</a>
<a class="bluecircle" href="imagenes/26grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/26full.png"/>
</a>
<a class="bluecircle" href="imagenes/27grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/27full.png"/>
</a>
<a class="bluecircle" href="imagenes/28grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/28full.png"/>
</a>
<a class="bluecircle" href="imagenes/29grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/29full.png"/>
</a>
<a class="bluecircle" href="imagenes/30grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/30full.png"/>
</a>
<a class="bluecircle" href="imagenes/31grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/31full.png"/>
</a>
<a class="bluecircle" href="imagenes/32grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/32full.png"/>
</a>
<a class="bluecircle" href="imagenes/33grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/33full.png"/>
</a>
<a class="bluecircle" href="imagenes/34grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/34full.png"/>
</a>
<a class="bluecircle" href="imagenes/35grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/35full.png"/>
</a>
<a class="bluecircle" href="imagenes/36grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/36full.png"/>
</a>
<a class="bluecircle" href="imagenes/37grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/37full.png"/>
</a>
<a class="bluecircle" href="imagenes/38grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/38full.png"/>
</a>
<a class="bluecircle" href="imagenes/39grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/39full.png"/>
</a>
<a class="bluecircle" href="imagenes/40grande.jpg">
<img width="150px" height="150px" src="circulosdecolor/40full.png"/>
</a>
</div>

</body>
</html>
  #18 (permalink)  
Antiguo 05/05/2015, 08:59
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 12 años
Puntos: 44
Respuesta: Cambio de color de imagen en hover
Recuerda que el código que te puse para el head era un ejemplo en el que la carpeta con los scripts se llamaba "magnificpopup", en el caso que le pusiste "galeria" tienes que cambiar la carpeta en el código:
Código HTML: 
Ver original
  1. <link rel="stylesheet" href="galeria/magnificpopup.css">
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  3. <script src="galeria/jquerymagnificpopupmin.js"></script>

Y no debería de haber problema en que este escrito "extraño" xD.
Y el script otro, va debajo del div con la id "galeria" no encima xD.
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.

Etiquetas: background, color, hover, html, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:49.