Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje09-10-2017, 17:44 (UTC)    
Título del mensaje: efecto para cambiar opacidad en las imágenes

Buenas tardes compañeros quisiera colocar este efecto n mi página de inicio:
http://desdeelsol.es.tl/

Código:
<a class="opacidad a.opacidad img {
  filter:alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
  }

a.opacidad:hover img {
  filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1.0;
  }"</a>


en las imagenes que van dentro de esta Marquee vertical:
Código:
<div style="text-align: center;">
<div style="text-align: center;"><a title="Los Tejos" href="http://desdeelsol.caster.fm" target="_blank"><img src="https://img.webme.com/pic/d/desdeelsol/online.jpg" alt="Los Tejos" /></a></div>
<div style="text-align: center;">
<div style="width:540px;height:680px;filter:alpha(opacity=0);background:url(//img.webme.com/pic/d/desdeelsol/2rhgfd.jpg)"><marquee onmouseover="this.stop()" style="WIDTH: 420px; HEIGHT: 680px" onmouseout="this.start()" scrollamount="3" direction="up">
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/totem.jpg" width="300&quot;" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/The_Yngwie_Malmsteen_Collection.jpg" width="300&quot;" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Santana.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/pink%20floyd.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/psiglo.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Dias%20de%20blues.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Deep%20Purple-3.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Crosby.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Creedence.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="Aqui tu imagen Baneer etc xD" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="Aqui tu imagen Baneer etc xD" width="300&quot;" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="Aqui tu imagen Baneer etc xD" width="300" height="200" alt="" />&quot;</a></p>
</marquee></div>
<br />
<br />
<div class="fb-comments" data-href="http://desdeelsol.es.tl/" data-numposts="5">&nbsp;</div>
</div>
</div>

Les paso todo el código de la página para no hacerme enredo, desde ya muchas gracias saludos para todos


Ultima edición por desdeelsol el Mie Oct 11, 2017 9:17 pm; editado 1 vez
Mensaje11-10-2017, 21:11 (UTC)    
Título del mensaje:

Alguien que me ayude???
Mensaje12-10-2017, 01:15 (UTC)    
Título del mensaje: Re: efecto para cambiar opacidad en imagenes

desdeelsol escribió:
Buenas tardes compañeros quisiera colocar este efecto n mi página de inicio:
http://desdeelsol.es.tl/

Código:
<a class="opacidad a.opacidad img {
  filter:alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
  }

a.opacidad:hover img {
  filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1.0;
  }"</a>


en las imagenes que van dentro de esta Marquee vertical:
Código:
<div style="text-align: center;">
<div style="text-align: center;"><a title="Los Tejos" href="http://desdeelsol.caster.fm" target="_blank"><img src="https://img.webme.com/pic/d/desdeelsol/online.jpg" alt="Los Tejos" /></a></div>
<div style="text-align: center;">
<div style="width:540px;height:680px;filter:alpha(opacity=0);background:url(//img.webme.com/pic/d/desdeelsol/2rhgfd.jpg)"><marquee onmouseover="this.stop()" style="WIDTH: 420px; HEIGHT: 680px" onmouseout="this.start()" scrollamount="3" direction="up">
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/totem.jpg" width="300&quot;" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/The_Yngwie_Malmsteen_Collection.jpg" width="300&quot;" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Santana.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/pink%20floyd.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/psiglo.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Dias%20de%20blues.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Deep%20Purple-3.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Crosby.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="https://img.webme.com/pic/d/desdeelsol/Creedence.jpg" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="Aqui tu imagen Baneer etc xD" width="300" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="Aqui tu imagen Baneer etc xD" width="300&quot;" height="200" alt="" /></a></p>
<p style="text-align: center;"><a target="_blank" href="http://desdeelsol.es.tl/">  <img border="0" src="Aqui tu imagen Baneer etc xD" width="300" height="200" alt="" />&quot;</a></p>
</marquee></div>
<br />
<br />
<div class="fb-comments" data-href="http://desdeelsol.es.tl/" data-numposts="5">&nbsp;</div>
</div>
</div>

Les paso todo el código de la página para no hacerme enredo, desde ya muchas gracias saludos para todos
Mensaje12-10-2017, 15:23 (UTC)    
Título del mensaje:

coloca un estilo para efecto hover en las imágenes. Ve a diseño, y en la caja de codigos "Códigos Sin style-tags" coloca:

Código:

.brillo
{
  filter: brightness(100%);
  -webkit-filter: brightness(100%);
  -moz-filter: brightness(100%);
  -o-filter: brightness(100%);
  -ms-filter: brightness(100%);
   transition-duration:0.5s;
}
.brillo:hover
{
  filter: brightness(60%);
  -webkit-filter: brightness(60%);
  -moz-filter: brightness(60%);
  -o-filter: brightness(60%);
  -ms-filter: brightness(60%);
   transition-duration:0.5s;
}


A cada imagen que desees colocarle efecto deberás llamarlo por su clase.
Ejemplo:

<img class="brillo" src="IMAGEN.PNG">
______________
Mensaje13-10-2017, 00:52 (UTC)    
Título del mensaje:

pwgpro escribió:
coloca un estilo para efecto hover en las imágenes. Ve a diseño, y en la caja de codigos "Códigos Sin style-tags" coloca:

Código:

.brillo
{
  filter: brightness(100%);
  -webkit-filter: brightness(100%);
  -moz-filter: brightness(100%);
  -o-filter: brightness(100%);
  -ms-filter: brightness(100%);
   transition-duration:0.5s;
}
.brillo:hover
{
  filter: brightness(60%);
  -webkit-filter: brightness(60%);
  -moz-filter: brightness(60%);
  -o-filter: brightness(60%);
  -ms-filter: brightness(60%);
   transition-duration:0.5s;
}


A cada imagen que desees colocarle efecto deberás llamarlo por su clase.
Ejemplo:

<img class="brillo" src="IMAGEN.PNG">



Lo siento no funciona
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group