#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Efectos de los vínculos de nuestras entradas
Etiquetas en forma de menú desplegable
Sunshine Blogger Template
Entradas Populares de forma horizontal
 Swipy Blogger Template
El Cubo de Rubik
Crear columnas en nuestras entradas
Trucos Gmail
Gameliso Magazine Blogger Template
Editar imagen Photopea
CALIBRE
Navegar por Photopea

Efectos imágenes para las entradas de nuestro blog

Hoy mostramos diferentes efectos en las imágenes de las entradas de nuestro blog cuando pasamos el ratón por encima.


Para el efecto aparecer al pasar el cursor en todas las imágenes del blog:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

cc
Para el efecto desvanecer al pasar el cursor en todas las imágenes del blog:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>



Para el efecto aparecer al pasar el cursor en las imágenes escogidas:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

eeeeeeeeeeeeee

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Los dos últimos efectos se realizaran solo a las imágenes que hemos seleccionado
Para ello tenemos que aplicar este código en la entrada de nuestro blog, con el link de la imagen seleccionada

Efecto aparecer
<img class='blImagjtef' src='URL DE LA IMAGEN'/>

Efecto desvanecer
<img class='blImaggjtef' src='URL DE LA IMAGEN'/>


Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

 Print Friendly and PDF

Publicar un comentario

0 Comentarios