Efecto Hover HTML&CSS

Efecto Zoom a una Imagen con HTML y CSS

octubre 13, 2024 0

Efecto Zoom a una Imagen con HTML y CSS

En este proyecto aprenderás a aplicar un efecto de zoom a una imagen usando HTML y CSS. Es ideal para galerías de imágenes o portfolios, donde quieras agregar un toque interactivo visualmente atractivo a las imágenes.

El efecto de zoom se logra mediante la propiedad transform de CSS, que permite escalar la imagen cuando el usuario pasa el mouse sobre ella. Todo el proceso es muy fluido gracias a la propiedad transition, que suaviza el efecto.

Este efecto se puede aplicar a cualquier imagen en tu sitio web y es altamente personalizable. Solo necesitas ajustar el tamaño de la imagen, la velocidad de la transición y el nivel de zoom deseado.

¿Qué aprenderás en este tutorial?

En este tutorial aprenderás a:

Crear un contenedor de imágenes estilizado con sombras y bordes redondeados.
Implementar efectos de transformación (zoom) con CSS.
Aplicar la propiedad hover para mejorar la interactividad de las imágenes.

¿Qué recursos necesitarás para realizar el proyecto?

Para completar este proyecto necesitarás:

Un editor de código como Visual Studio Code o Sublime Text.
Conocimientos básicos de HTML y CSS.
Una imagen que desees utilizar en tu página web.

Efecto Zoom a una Imagen con HTML y CSS | Tutorial Completo

En este video te enseño cómo agregar un efecto de zoom a una imagen utilizando HTML y CSS de manera sencilla. ¡No olvides suscribirte para más contenido!

Código HTML:

Este es el código HTML que estructura la página con la imagen y su contenedor:

Este código crea un contenedor donde la imagen será mostrada, lista para aplicar el efecto de zoom con CSS.

Código CSS:

Este es el código CSS que aplica el efecto de zoom a la imagen:

Este código usa la propiedad transform: scale(1.2) para ampliar la imagen cuando el usuario coloca el cursor sobre ella, y suaviza el efecto con la propiedad transition.

Vista Previa:

Aquí puedes ver cómo se amplía la imagen cuando pasas el cursor sobre ella, mejorando la experiencia de usuario con un toque interactivo.

Conclusión:

El efecto de zoom sobre imágenes es una excelente manera de agregar interactividad a tu sitio web. Usando solo HTML y CSS, puedes lograr resultados visuales atractivos sin necesidad de JavaScript ni bibliotecas adicionales. Es un efecto simple, pero muy efectivo para captar la atención de los visitantes.

<script src='https://www.blogger.com/static/v1/jsbin/1212307205-comment_from_post_iframe.js' type='text/javascript'></script>

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3878540743-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7vvCN9YLGs1Ixp_Cjg3tJ-iwk6Pw:1759515392628';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1960578344641310559','//www.sleedw.com/2024/10/efecto-zoom-una-imagen-con-html-y-css.html','1960578344641310559');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1960578344641310559', 'title': 'SLee Dw', 'url': 'https://www.sleedw.com/2024/10/efecto-zoom-una-imagen-con-html-y-css.html', 'canonicalUrl': 'https://www.sleedw.com/2024/10/efecto-zoom-una-imagen-con-html-y-css.html', 'homepageUrl': 'https://www.sleedw.com/', 'searchUrl': 'https://www.sleedw.com/search', 'canonicalHomepageUrl': 'https://www.sleedw.com/', 'blogspotFaviconUrl': 'https://www.sleedw.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'es-419', 'localeUnderscoreDelimited': 'es_419', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22SLee Dw - Atom\x22 href\x3d\x22https://www.sleedw.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22SLee Dw - RSS\x22 href\x3d\x22https://www.sleedw.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22SLee Dw - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1960578344641310559/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22SLee Dw - Atom\x22 href\x3d\x22https://www.sleedw.com/feeds/3907578018047024395/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/00d5921fb137c39b', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Obtener v\xednculo', 'key': 'link', 'shareMessage': 'Obtener v\xednculo', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartir en Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Compartir en X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartir en Pinterest', 'target': 'pinterest'}, {'name': 'Correo electr\xf3nico', 'key': 'email', 'shareMessage': 'Correo electr\xf3nico', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27es_419\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Read more \xbb', 'pageType': 'item', 'postId': '3907578018047024395', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEm5hZ0VCOTSNhEJaP2izIh-tZ38iMaWqdYq2aU8xWjwASoPBC4VsM2CIRQU0sPs9eMDLm2Xc22IP5_8FLFpMbd4NqLTrjcWHXV_kTXAVMIinpYRjMfK1vCjdh0et7kHlc5f2xPIMx1XQj4q-9zlJ3ood4uhs5yiZAK26guoLMYfiKxKXpKqCp3768sZM/s72-c/EFECTO%20ZOOM%20A%20UNA%20IMAGEN%20CON%20CSS.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEm5hZ0VCOTSNhEJaP2izIh-tZ38iMaWqdYq2aU8xWjwASoPBC4VsM2CIRQU0sPs9eMDLm2Xc22IP5_8FLFpMbd4NqLTrjcWHXV_kTXAVMIinpYRjMfK1vCjdh0et7kHlc5f2xPIMx1XQj4q-9zlJ3ood4uhs5yiZAK26guoLMYfiKxKXpKqCp3768sZM/s16000/EFECTO%20ZOOM%20A%20UNA%20IMAGEN%20CON%20CSS.png', 'pageName': 'Efecto Zoom a una Imagen con HTML y CSS', 'pageTitle': 'SLee Dw: Efecto Zoom a una Imagen con HTML y CSS', 'metaDescription': 'Aprende a crear un efecto de zoom a una imagen usando HTML y CSS. Ideal para galer\xedas y portfolios interactivos.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'V\xednculo copiado al portapapeles', 'ok': 'Aceptar', 'postLink': 'Publicar v\xednculo'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Personalizado', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Efecto Zoom a una Imagen con HTML y CSS', 'description': 'Aprende a crear un efecto de zoom a una imagen usando HTML y CSS. Ideal para galer\xedas y portfolios interactivos.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEm5hZ0VCOTSNhEJaP2izIh-tZ38iMaWqdYq2aU8xWjwASoPBC4VsM2CIRQU0sPs9eMDLm2Xc22IP5_8FLFpMbd4NqLTrjcWHXV_kTXAVMIinpYRjMfK1vCjdh0et7kHlc5f2xPIMx1XQj4q-9zlJ3ood4uhs5yiZAK26guoLMYfiKxKXpKqCp3768sZM/s16000/EFECTO%20ZOOM%20A%20UNA%20IMAGEN%20CON%20CSS.png', 'url': 'https://www.sleedw.com/2024/10/efecto-zoom-una-imagen-con-html-y-css.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3907578018047024395}}, {'name': 'widgets', 'data': [{'title': 'SLee Dw (Encabezado)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header51'}, {'title': 'Menu', 'type': 'PageList', 'sectionId': 'header', 'id': 'PageList51'}, {'title': 'Tutoriales Populares', 'type': 'PopularPosts', 'sectionId': 'header', 'id': 'PopularPosts51', 'posts': [{'title': 'C\xf3mo Hacer un Men\xfa Lateral con HTML y CSS', 'id': 7022035973837712195}, {'title': 'Cards - Tarjetas con Efecto Hover -  Html y Css', 'id': 8547414110761430268}, {'title': 'C\xf3mo Agregar Iconos Online a tu Sitio Web usando Font Awesome', 'id': 4360027024626190812}, {'title': 'Barra de Redes Sociales Flotante con HTML y CSS', 'id': 1653323812070282008}, {'title': 'Como hacer un Men\xfa Desplegable con Html y Css', 'id': 1422912332681348123}, {'title': 'Efecto Hover a una Imagen con Html y Css', 'id': 8064274890093804388}, {'title': 'C\xf3mo Crear una Ventana Modal en HTML y CSS', 'id': 5330178491384826846}, {'title': 'C\xf3mo Crear un Slider Autom\xe1tico con HTML y CSS | Sin JavaScript', 'id': 3239873037710879203}, {'title': 'C\xf3mo Crear un Banner Animado con Html y Css', 'id': 2132912634355061121}, {'title': 'C\xf3mo Crear un Efecto Hover Avanzado en HTML y CSS', 'id': 3560127906615546078}]}, {'title': 'Entradas del blog', 'type': 'Blog', 'sectionId': 'Hero', 'id': 'Blog99', 'posts': [{'id': '3907578018047024395', 'title': 'Efecto Zoom a una Imagen con HTML y CSS', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEm5hZ0VCOTSNhEJaP2izIh-tZ38iMaWqdYq2aU8xWjwASoPBC4VsM2CIRQU0sPs9eMDLm2Xc22IP5_8FLFpMbd4NqLTrjcWHXV_kTXAVMIinpYRjMfK1vCjdh0et7kHlc5f2xPIMx1XQj4q-9zlJ3ood4uhs5yiZAK26guoLMYfiKxKXpKqCp3768sZM/s16000/EFECTO%20ZOOM%20A%20UNA%20IMAGEN%20CON%20CSS.png', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Publicadas por'}, {'name': 'timestamp', 'label': 'a la/s '}, {'name': 'comments', 'label': 'comentarios'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Etiquetas:'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Ubicaci\xf3n:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Publicadas por'}, {'name': 'timestamp', 'label': 'a la/s '}, {'name': 'comments', 'label': 'comentarios'}, {'name': 'labels', 'label': 'Etiquetas:'}, {'name': 'location', 'label': 'Ubicaci\xf3n:'}]}, {'title': '{ content: \x22carousel\x22, top: 2 }', 'type': 'PopularPosts', 'sectionId': 'upper', 'id': 'PopularPosts52', 'posts': [{'title': 'C\xf3mo Hacer un Men\xfa Lateral con HTML y CSS', 'id': 7022035973837712195}, {'title': 'Cards - Tarjetas con Efecto Hover -  Html y Css', 'id': 8547414110761430268}, {'title': 'C\xf3mo Agregar Iconos Online a tu Sitio Web usando Font Awesome', 'id': 4360027024626190812}, {'title': 'Barra de Redes Sociales Flotante con HTML y CSS', 'id': 1653323812070282008}, {'title': 'Como hacer un Men\xfa Desplegable con Html y Css', 'id': 1422912332681348123}, {'title': 'Efecto Hover a una Imagen con Html y Css', 'id': 8064274890093804388}, {'title': 'C\xf3mo Crear una Ventana Modal en HTML y CSS', 'id': 5330178491384826846}, {'title': 'C\xf3mo Crear un Slider Autom\xe1tico con HTML y CSS | Sin JavaScript', 'id': 3239873037710879203}, {'title': 'C\xf3mo Crear un Banner Animado con Html y Css', 'id': 2132912634355061121}, {'title': 'C\xf3mo Crear un Efecto Hover Avanzado en HTML y CSS', 'id': 3560127906615546078}]}, {'title': 'Entradas del blog', 'type': 'Blog', 'sectionId': 'Content', 'id': 'Blog1', 'posts': [{'id': '3907578018047024395', 'title': 'Efecto Zoom a una Imagen con HTML y CSS', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEm5hZ0VCOTSNhEJaP2izIh-tZ38iMaWqdYq2aU8xWjwASoPBC4VsM2CIRQU0sPs9eMDLm2Xc22IP5_8FLFpMbd4NqLTrjcWHXV_kTXAVMIinpYRjMfK1vCjdh0et7kHlc5f2xPIMx1XQj4q-9zlJ3ood4uhs5yiZAK26guoLMYfiKxKXpKqCp3768sZM/s16000/EFECTO%20ZOOM%20A%20UNA%20IMAGEN%20CON%20CSS.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'comments'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'comments'}, {'name': 'labels', 'label': ''}]}, {'title': 'Buscar', 'type': 'BlogSearch', 'sectionId': 'sidebar', 'id': 'BlogSearch51'}, {'title': 'Recomendados', 'type': 'FeaturedPost', 'sectionId': 'sidebar', 'id': 'FeaturedPost51', 'postId': '1422912332681348123'}, {'title': '{ title: \x22Comentarios\x22, content: \x22comments\x22 }', 'type': 'Text', 'sectionId': 'sidebar', 'id': 'Text51'}, {'title': '{ title: \x22Populares\x22, content: \x22trending\x22 }', 'type': 'PopularPosts', 'sectionId': 'sidebar', 'id': 'PopularPosts53', 'posts': [{'title': 'C\xf3mo Hacer un Men\xfa Lateral con HTML y CSS', 'id': 7022035973837712195}, {'title': 'Cards - Tarjetas con Efecto Hover -  Html y Css', 'id': 8547414110761430268}, {'title': 'C\xf3mo Agregar Iconos Online a tu Sitio Web usando Font Awesome', 'id': 4360027024626190812}, {'title': 'Barra de Redes Sociales Flotante con HTML y CSS', 'id': 1653323812070282008}, {'title': 'Como hacer un Men\xfa Desplegable con Html y Css', 'id': 1422912332681348123}]}, {'title': 'Example', 'type': 'HTML', 'sectionId': 'sidebar-post', 'id': 'HTML55'}, {'title': 'Example', 'type': 'HTML', 'sectionId': 'sidebar-page', 'id': 'HTML56'}, {'title': 'Modo', 'type': 'Text', 'sectionId': 'Filters', 'id': 'Text52'}, {'title': 'Orden', 'type': 'Text', 'sectionId': 'Filters', 'id': 'Text53'}, {'title': 'T\xe9rminos', 'type': 'BlogSearch', 'sectionId': 'Filters', 'id': 'BlogSearch52'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'footer-upper', 'id': 'HTML57'}, {'title': 'Footer links', 'type': 'PageList', 'sectionId': 'footer-lower', 'id': 'PageList52'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header51', 'header', document.getElementById('Header51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList51', 'header', document.getElementById('PageList51'), {'title': 'Menu', 'links': [{'isCurrentPage': false, 'href': 'https://www.sleedw.com/search/label/HTML%26CSS', 'title': 'HTML \x26 CSS'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts51', 'header', document.getElementById('PopularPosts51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog99', 'Hero', document.getElementById('Blog99'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2509962609-lbx__es_419.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts52', 'upper', document.getElementById('PopularPosts52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'Content', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2509962609-lbx__es_419.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch51', 'sidebar', document.getElementById('BlogSearch51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost51', 'sidebar', document.getElementById('FeaturedPost51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text51', 'sidebar', document.getElementById('Text51'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts53', 'sidebar', document.getElementById('PopularPosts53'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML55', 'sidebar-post', document.getElementById('HTML55'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML56', 'sidebar-page', document.getElementById('HTML56'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text52', 'Filters', document.getElementById('Text52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text53', 'Filters', document.getElementById('Text53'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch52', 'Filters', document.getElementById('BlogSearch52'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML57', 'footer-upper', document.getElementById('HTML57'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList52', 'footer-lower', document.getElementById('PageList52'), {'title': 'Footer links', 'links': [{'isCurrentPage': false, 'href': 'https://www.sleedw.com/', 'title': 'P\xe1gina Principal'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
</script>
</body>