{"id":312,"date":"2013-10-21T07:59:00","date_gmt":"2013-10-21T07:59:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/10\/21\/code-don-gian-zoom-anh-bang-css3\/"},"modified":"2013-10-21T07:59:00","modified_gmt":"2013-10-21T07:59:00","slug":"code-don-gian-zoom-anh-bang-css3","status":"publish","type":"post","link":"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/","title":{"rendered":"Code \u0111\u01a1n gi\u1ea3n Zoom \u1ea3nh b\u1eb1ng CSS3"},"content":{"rendered":"\n<p>Zoom \u1ea3nh c\u00f3 nhi\u1ec1u c\u00e1ch, trong \u0111\u00f3 ch\u1ee7 y\u1ebfu d\u1ef1a v\u00e0o CSS3 ho\u1eb7c Jquery v\u00e0 \u0111\u00f4i khi l\u00e0 c\u1ea3 hai. <\/p>\n\n\n\n<p>N\u1ebfu x\u00e0i Jquery b\u1ea1n c\u00f3 c\u00e1c hi\u1ec7u \u1ee9ng zoom r\u1ea5t \u0111\u1eb9p (th\u00ed d\u1ee5 nh\u01b0 <a href=\"\/cach-dung-cloud-zoom-jquery-de-phong-to-anh\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloud Zoom<\/a>), x\u00e0i CSS3 th\u00ec hi\u1ec7u \u1ee9ng tuy kh\u00f4ng b\u1eb1ng nh\u01b0ng b\u00f9 l\u1ea1i code r\u1ea5t \u0111\u01a1n gi\u1ea3n &#8211; mi\u1ec5n ph\u00ed v\u00e0 kh\u00f4ng \u0111\u00f2i h\u1ecfi t\u1ea3i th\u01b0 vi\u1ec7n kh\u00e1 n\u1eb7ng c\u00f3 th\u1ec3 l\u00e0m ch\u1eadm \u0111i t\u1ed1c \u0111\u1ed9 l\u01b0\u1edbt web.<\/p>\n\n\n\n<p>Ch\u00fang ta s\u1ebd \u00e1p d\u1ee5ng 2 thu\u1ed9c t\u00ednh c\u1ee7a CSS3:<\/p>\n\n\n\n<ul><li><code>transform: scale(x,y)<\/code> &nbsp;&#8211; &nbsp;theo \u0111\u00f3 x, y l\u00e0 c\u00e1c gi\u00e1 tr\u1ecb ta mu\u1ed1n ph\u00f3ng l\u00ean theo tr\u1ee5c x v\u00e0 y, th\u01b0\u1eddng th\u00ec ta \u0111\u1ec3 x = y \u0111\u1ec3 b\u1ee9c \u1ea3nh \u0111\u01b0\u1ee3c ph\u00f3ng to m\u00e0 v\u1eabn gi\u1eef nguy\u00ean t\u1ec9 l\u1ec7. Ch\u1eb3ng h\u1ea1n&nbsp;transform: scale(2,2) s\u1ebd l\u00e0m b\u1ee9c \u1ea3nh ph\u00f3ng to l\u00ean 2 l\u1ea7n;<\/li><li><code>transition: all 1s ease<\/code> &nbsp;&#8211; &nbsp;theo \u0111\u00f3 ch\u00fang ta s\u1ebd l\u00e0m b\u1ee9c \u1ea3nh \u0111\u01b0\u1ee3c ph\u00f3ng to d\u1ea7n d\u1ea7n trong kho\u1ea3ng th\u1eddi gian 1s ch\u1ee9 kh\u00f4ng b\u1ee5p m\u1ed9t c\u00e1i to l\u00ean lu\u00f4n (h\u01a1n Th\u00e1nh Gi\u00f3ng!)<\/li><\/ul>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style>\n#phongto {\ntransition: all 1s ease;\n-webkit-transition: all 1s ease;\n-moz-transition: all 1s ease;\n-o-transition: all 1s ease;\n}\n \n#phongto:hover {\ntransform: scale(1.5,1.5);\n-webkit-transform: scale(1.5,1.5);\n-moz-transform: scale(1.5,1.5);\n-o-transform: scale(1.5,1.5);\n-ms-transform: scale(1.5,1.5);\n}\n&lt;\/style>\n&lt;img id=\"phongto\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/phong-to-anh.jpg\" alt=\"code m\u1eabu ph\u00f3ng to \u1ea3nh b\u1eb1ng CSS3\" width=\"640\" height=\"425\"><\/code><\/pre>\n\n\n\n<p>\u0110o\u1ea1n code tr\u00ean c\u00f3 ngh\u0129a l\u00e0 m\u1ecdi hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed5i s\u1ebd di\u1ec5n ra trong v\u00f2ng 1s, hi\u1ec7u \u1ee9ng s\u1ebd x\u1ea3y ra khi\u00a0<code>hover<\/code>\u00a0qua \u1ea3nh v\u00e0 l\u00e0m b\u1ee9c h\u00ecnh t\u0103ng k\u00edch th\u01b0\u1edbc l\u00ean 1.5 l\u1ea7n. C\u00e1c ti\u1ec1n t\u1ed1 <code>-webkit<\/code>, <code>-moz<\/code>, <code>-o<\/code>, <code>-ms<\/code> l\u00e0 \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c nhau.<\/p>\n\n\n\n<p>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/kiencang.net\/the-img-trong-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ebb img trong html<\/a>.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3 demo:<\/p>\n\n\n\n<style>\n#phongto {\ntransition: all 1s ease;\n-webkit-transition: all 1s ease;\n-moz-transition: all 1s ease;\n-o-transition: all 1s ease;\n}\n \n#phongto:hover {\ntransform: scale(1.5,1.5);\n-webkit-transform: scale(1.5,1.5);\n-moz-transform: scale(1.5,1.5);\n-o-transform: scale(1.5,1.5);\n-ms-transform: scale(1.5,1.5);\n}\n<\/style>\n<img loading=\"lazy\" decoding=\"async\" id=\"phongto\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/phong-to-anh.jpg\" alt=\"code m\u1eabu ph\u00f3ng to \u1ea3nh b\u1eb1ng CSS3\" width=\"640\" height=\"425\">\n","protected":false},"excerpt":{"rendered":"<p>Zoom \u1ea3nh c\u00f3 nhi\u1ec1u c\u00e1ch, trong \u0111\u00f3 ch\u1ee7 y\u1ebfu d\u1ef1a v\u00e0o CSS3 ho\u1eb7c Jquery v\u00e0 \u0111\u00f4i khi l\u00e0 c\u1ea3 hai. N\u1ebfu x\u00e0i Jquery b\u1ea1n c\u00f3 c\u00e1c hi\u1ec7u \u1ee9ng zoom r\u1ea5t \u0111\u1eb9p (th\u00ed d\u1ee5 nh\u01b0 Cloud Zoom), x\u00e0i CSS3 th\u00ec hi\u1ec7u \u1ee9ng tuy kh\u00f4ng b\u1eb1ng nh\u01b0ng b\u00f9 l\u1ea1i code r\u1ea5t \u0111\u01a1n gi\u1ea3n &#8211; mi\u1ec5n ph\u00ed v\u00e0 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229,236],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Code \u0111\u01a1n gi\u1ea3n Zoom \u1ea3nh b\u1eb1ng CSS3 &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code \u0111\u01a1n gi\u1ea3n Zoom \u1ea3nh b\u1eb1ng CSS3 &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Zoom \u1ea3nh c\u00f3 nhi\u1ec1u c\u00e1ch, trong \u0111\u00f3 ch\u1ee7 y\u1ebfu d\u1ef1a v\u00e0o CSS3 ho\u1eb7c Jquery v\u00e0 \u0111\u00f4i khi l\u00e0 c\u1ea3 hai. N\u1ebfu x\u00e0i Jquery b\u1ea1n c\u00f3 c\u00e1c hi\u1ec7u \u1ee9ng zoom r\u1ea5t \u0111\u1eb9p (th\u00ed d\u1ee5 nh\u01b0 Cloud Zoom), x\u00e0i CSS3 th\u00ec hi\u1ec7u \u1ee9ng tuy kh\u00f4ng b\u1eb1ng nh\u01b0ng b\u00f9 l\u1ea1i code r\u1ea5t \u0111\u01a1n gi\u1ea3n &#8211; mi\u1ec5n ph\u00ed v\u00e0 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-21T07:59:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/phong-to-anh.jpg\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Code \u0111\u01a1n gi\u1ea3n Zoom \u1ea3nh b\u1eb1ng CSS3 &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/","og_locale":"vi_VN","og_type":"article","og_title":"Code \u0111\u01a1n gi\u1ea3n Zoom \u1ea3nh b\u1eb1ng CSS3 &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Zoom \u1ea3nh c\u00f3 nhi\u1ec1u c\u00e1ch, trong \u0111\u00f3 ch\u1ee7 y\u1ebfu d\u1ef1a v\u00e0o CSS3 ho\u1eb7c Jquery v\u00e0 \u0111\u00f4i khi l\u00e0 c\u1ea3 hai. N\u1ebfu x\u00e0i Jquery b\u1ea1n c\u00f3 c\u00e1c hi\u1ec7u \u1ee9ng zoom r\u1ea5t \u0111\u1eb9p (th\u00ed d\u1ee5 nh\u01b0 Cloud Zoom), x\u00e0i CSS3 th\u00ec hi\u1ec7u \u1ee9ng tuy kh\u00f4ng b\u1eb1ng nh\u01b0ng b\u00f9 l\u1ea1i code r\u1ea5t \u0111\u01a1n gi\u1ea3n &#8211; mi\u1ec5n ph\u00ed v\u00e0 &hellip;","og_url":"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-10-21T07:59:00+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/phong-to-anh.jpg"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/","url":"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/","name":"Code \u0111\u01a1n gi\u1ea3n Zoom \u1ea3nh b\u1eb1ng CSS3 &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-10-21T07:59:00+00:00","dateModified":"2013-10-21T07:59:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/code-don-gian-zoom-anh-bang-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Code \u0111\u01a1n gi\u1ea3n Zoom \u1ea3nh b\u1eb1ng CSS3"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/312"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}