#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Introducción al HTML
Hacer tooltip con una imagen
Rutinas The Ordinary
Personalizar la primera letra de las entradas del blog
Convertidor PDF, JPG, Word, Excel, PNG...
Efectos imágenes para las entradas de nuestro blog
Plantilla Vogue
Cómo Insertar un PDF en excel
Botón subir arriba
Calcular el porcentaje
Hacer una tarjeta de navidad
Ventanas modales para nuestras entradas

Efectos imágenes

Efectos en nuestras imágenes al pasar el cursor






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>




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>



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'/>

Publicar un comentario

0 Comentarios