Código de CSS - Efecto de zoom ha varios elementos con un evento hover con CSS3

Val: 560

Efecto de zoom ha varios elementos con un evento hover con CSS3

Publicado el 8 de Diciembre del 2020 por Xavi (548 códigos)

7.633 visualizaciones desde el 8 de Diciembre del 2020

Este código es una modificación del código https://www.lawebdelprogramador.com/codigo/CSS/2275-Efecto-de-zoom-en-una-imagen-y-texto-con-CSS3.html#comentarios, permitiendo que al pasar el ratón por encima de un elemento, se active el hover de un texto y una imagen a la vez.

Publicado el 8 de Diciembre del 2020

7.634 visualizaciones desde el 8 de Diciembre del 2020

<!DOCTYPE html>

<html>

<head>

    <title>Efecto de zoom en una imagen y texto con CSS3</title>

    <style>

        .inside{

            /* Aumentamos la anchura y altura durante 2 segundos */

            transition: width 2s, height 2s, transform 2s;

        .zoom {

            display:inline-block;

        .zoom:hover > .inside{

            /* tranformamos el contenido de los elementos .inside al pasar el mouse

               por encima del elemento .zoom al doble de su tamaño con scale(2). */

            transform : scale(2);

    </style>

</head>

<body>

<h2>Efecto zoom</h2>

<div style='text-align:center;'>

    <div class="zoom">

        <div class="inside">Efecto de zoom con CSS3</div>

        <img class="inside" src="http://www.lawebdelprogramador.com/logolwp100x25.jpg" />

    </div>

</div>

</body>

</html>

No hay comentarios

http://lwp-l.com/s6759

Efecto de zoom en una imagen y texto con CSS3

iconos con efecto