{"id":100,"date":"2019-11-14T10:36:39","date_gmt":"2019-11-14T03:36:39","guid":{"rendered":"http:\/\/shopnet.muathemewordpress.net\/?p=100"},"modified":"2021-05-22T17:21:07","modified_gmt":"2021-05-22T10:21:07","slug":"them-hieu-ung-anh-sang-khi-hover-anh-san-pham-woocommerce-bang-css","status":"publish","type":"post","link":"https:\/\/chophanmem.samba.vn\/them-hieu-ung-anh-sang-khi-hover-anh-san-pham-woocommerce-bang-css\/","title":{"rendered":"Th\u00eam hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng khi hover \u1ea3nh s\u1ea3n ph\u1ea9m Woocommerce b\u1eb1ng CSS"},"content":{"rendered":"

Ch\u00e0o c\u00e1c b\u1ea1n, b\u00e0i vi\u1ebft tr\u01b0\u1edbc m\u00ecnh \u0111\u00e3 h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n th\u00eam hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng tr\u01b0\u1ee3t khi hover v\u00e0o \u1ea3nh b\u00e0i vi\u1ebft trong theme Flatsome r\u1ed3i ph\u1ea3i kh\u00f4ng? H\u00f4m nay m\u00ecnh ti\u1ebfp t\u1ee5c h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n th\u00eam hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng \u0111\u1eb9p khi\u00a0hover \u1ea3nh s\u1ea3n ph\u1ea9m Woocommerce<\/strong>\u00a0nh\u00e9!<\/p>\n

Demo:\u00a0http:\/\/dienmay3.ninhbinhweb.info<\/a>,\u00a0http:\/\/bds8.ninhbinhweb.info<\/a><\/strong><\/p>\n

\u0110i\u1ec1u ki\u1ec7n & y\u00eau c\u1ea7u<\/h3>\n

B\u00e0i vi\u1ebft h\u01b0\u1edbng d\u1eabn tr\u00ean th\u1ef1c t\u1ebf trong qu\u00e1 tr\u00ecnh l\u00e0m website c\u1ee7a m\u00ecnh. Ki\u1ebfn th\u1ee9c c\u00f3 th\u1ec3 s\u1ebd q\u00fay b\u00e1u v\u1edbi nhi\u1ec1u ng\u01b0\u1eddi, nh\u1eefng c\u0169ng c\u00f3 th\u1ec3 kh\u00f4ng l\u1ea1 l\u1eabm g\u00ec v\u1edbi m\u1ed9t s\u1ed1 b\u1ea1n. Do \u0111\u00f3, c\u00e1c cao th\u1ee7 xem qua c\u00f3 g\u00ec sai s\u00f3t vui l\u00f2ng ch\u1ec9 gi\u00e1o th\u00eam cho m\u00ecnh nh\u00e9!<\/p>\n

Trang demo \u0111\u1ec3 th\u1ef1c hi\u1ec7n \u0111o\u1ea1n code h\u01b0\u1edbng d\u1eabn m\u00ecnh c\u00f3 th\u00f4ng s\u1ed1 nh\u01b0 sau:<\/p>\n

    \n
  • N\u1ec1n t\u1ea3ng:<\/strong>\u00a0WordPress 5.1<\/li>\n
  • Theme:<\/strong>\u00a0Flatsome<\/li>\n
  • Plugin s\u1eed d\u1ee5ng:<\/strong>\u00a0Woocommerce<\/li>\n<\/ul>\n

    Do \u0111\u00f3, n\u1ebfu b\u1ea1n c\u0169ng \u0111ang c\u00f3 website \u0111\u00e1p \u1ee9ng \u0111\u1ea7y \u0111\u1ee7 th\u00f4ng tin nh\u01b0 m\u00ecnh v\u1eeba li\u1ec7t k\u00ea th\u00ec c\u1ee9 an t\u00e2m copy \u2013 paste theo h\u01b0\u1edbng d\u1eabn l\u00e0 s\u1ebd th\u00e0nh c\u00f4ng nh\u00e9!<\/p>\n

    C\u00e1c b\u1ea1n n\u00e0o kh\u00f4ng l\u00e0m \u0111\u01b0\u1ee3c ho\u1eb7c g\u1eb7p l\u1ed7i, vui l\u00f2ng comment \u0111\u1ec3 m\u00ecnh t\u00ecm h\u01b0\u1edbng x\u1eed l\u00ed c\u00f9ng nha!<\/p>\n

    T\u1ea1o hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng l\u1ea5p l\u00e1nh khi hover v\u00e0o \u1ea3nh s\u1ea3n ph\u1ea9m Woocommerce<\/h3>\n

    B\u01b0\u1edbc 1: Copy CSS<\/strong><\/h4>\n

    C\u00e1c b\u1ea1n copy to\u00e0n b\u1ed9 \u0111o\u1ea1n code CSS d\u01b0\u1edbi \u0111\u00e2y nh\u00e9! \u0110\u1eebng thi\u1ebfu g\u00ec k\u1ebbo kh\u00f4ng th\u00e0nh c\u00f4ng!<\/p>\n

    \u0110o\u1ea1n CSS d\u01b0\u1edbi s\u1ebd l\u00e0m vi\u1ec7c v\u1edbi class\u00a0.product-small .box-image.\u00a0<\/strong>Do \u0111\u00f3, b\u1ea5t c\u1ee9 s\u1ea3n ph\u1ea9m Woocommerce n\u00e0o trong website c\u00f3 \u1ea3nh \u0111\u1ea1i di\u1ec7n n\u00f3 \u0111\u1ec1u \u00e1p d\u1ee5ng hi\u1ec7u \u1ee9ng n\u00e0y c\u00e1c b\u1ea1n nh\u00e9!<\/p>\n

    \n
    \n\n\n\n
    \n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n
    7<\/div>\n
    8<\/div>\n
    9<\/div>\n
    10<\/div>\n
    11<\/div>\n
    12<\/div>\n
    13<\/div>\n
    14<\/div>\n
    15<\/div>\n
    16<\/div>\n
    17<\/div>\n
    18<\/div>\n
    19<\/div>\n
    20<\/div>\n
    21<\/div>\n
    22<\/div>\n<\/div>\n<\/td>\n
    		\n
    \n
    .<\/span>product<\/span>–<\/span>small<\/span> .<\/span>box<\/span>–<\/span>image<\/span>:<\/span>hover<\/span>::<\/span>before<\/span>{<\/span><\/div>\n
    –<\/span>webkit<\/span>–<\/span>animation<\/span>:<\/span>shine<\/span> .<\/span>75s<\/span>;<\/span>animation<\/span>:<\/span>shine<\/span> .<\/span>75s<\/span><\/div>\n
    }<\/span><\/div>\n
    @<\/span>–<\/span>webkit<\/span>–<\/span>keyframes<\/span> shine<\/span>{<\/span><\/div>\n
    100<\/span>%<\/span>{<\/span>left<\/span>:<\/span>125<\/span>%<\/span>}<\/span><\/div>\n
    }<\/span><\/div>\n
    @<\/span>keyframes<\/span> shine<\/span>{<\/span><\/div>\n
    100<\/span>%<\/span>{<\/span>left<\/span>:<\/span>125<\/span>%<\/span>}<\/span><\/div>\n
    }<\/span><\/div>\n
    .<\/span>product<\/span>–<\/span>small<\/span> .<\/span>box<\/span>–<\/span>image<\/span>::<\/span>before<\/span>{<\/span><\/div>\n
    position<\/span>:<\/span>absolute<\/span>;<\/span><\/div>\n
    top<\/span>:<\/span>0<\/span>;<\/span><\/div>\n
    left<\/span>:<\/span>–<\/span>75<\/span>%<\/span>;<\/span><\/div>\n
    z<\/span>–<\/span>index<\/span>:<\/span>2<\/span>;<\/span><\/div>\n
    display<\/span>:<\/span>block<\/span>;<\/span><\/div>\n
    content<\/span>:<\/span>”<\/span>;<\/span><\/div>\n
    width<\/span>:<\/span>50<\/span>%<\/span>;<\/span><\/div>\n
    height<\/span>:<\/span>100<\/span>%<\/span>;<\/span><\/div>\n
    background<\/span>:<\/span>–<\/span>webkit<\/span>–<\/span>linear<\/span>–<\/span>gradient<\/span>(<\/span>left<\/span>,<\/span>rgba<\/span>(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>0<\/span>)<\/span> 0<\/span>,<\/span>rgba<\/span>(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>.<\/span>3<\/span>)<\/span> 100<\/span>%<\/span>)<\/span>;<\/span><\/div>\n
    background<\/span>:<\/span>linear<\/span>–<\/span>gradient<\/span>(<\/span>to<\/span> right<\/span>,<\/span>rgba<\/span>(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>0<\/span>)<\/span> 0<\/span>,<\/span>rgba<\/span>(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>.<\/span>3<\/span>)<\/span> 100<\/span>%<\/span>)<\/span>;<\/span><\/div>\n
    –<\/span>webkit<\/span>–<\/span>transform<\/span>:<\/span>skewX<\/span>(<\/span>–<\/span>25deg<\/span>)<\/span>;<\/span>transform<\/span>:<\/span>skewX<\/span>(<\/span>–<\/span>25deg<\/span>)<\/span><\/div>\n
    }<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

    B\u01b0\u1edbc 2: Paste CSS<\/strong><\/h4>\n

    C\u00e1c b\u1ea1n v\u00e0o\u00a0Giao di\u1ec7n<\/strong>\u00a0\u2013\u00a0T\u00f9y bi\u1ebfn<\/strong>\u00a0\u2013\u00a0Style<\/strong>\u00a0\u2013\u00a0Custom CSS.<\/strong>\u00a0Paste to\u00e0n b\u1ed9 \u0111o\u1ea1n CSS \u1edf tr\u00ean v\u00e0o nh\u00e9!<\/p>\n

    B\u01b0\u1edbc 3: L\u01b0u l\u1ea1i v\u00e0 h\u01b0\u1edfng th\u00e0nh qu\u1ea3<\/strong><\/h4>\n

    C\u00e1c b\u1ea1n Save l\u1ea1i thao t\u00e1c v\u00e0 ra trang ch\u1ee7 ho\u1eb7c trang l\u01b0u tr\u1eef b\u00e0i vi\u1ebft \u0111\u1ec3 xem s\u1ef1 thay \u0111\u1ed5i nh\u00e9!<\/p>\n

    L\u1eddi k\u1ebft<\/h3>\n

    C\u00e1m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 quan t\u00e2m theo d\u00f5i v\u00e0 \u1ee7ng h\u1ed9 GiuseArt. Ch\u00fac c\u00e1c b\u1ea1n s\u1eed d\u1ee5ng \u0111o\u1ea1n code CSS tr\u00ean hi\u1ec7u qu\u1ea3 nh\u00e9! C\u00f3 th\u1eafc m\u1eafc ho\u1eb7c l\u1ed7i ch\u1ed7 n\u00e0o c\u0169ng vui l\u00f2ng comment cho m\u00ecnh bi\u1ebft n\u1eefa<\/p>\n","protected":false},"excerpt":{"rendered":"

    Ch\u00e0o c\u00e1c b\u1ea1n, b\u00e0i vi\u1ebft tr\u01b0\u1edbc m\u00ecnh \u0111\u00e3 h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n th\u00eam hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng tr\u01b0\u1ee3t khi hover v\u00e0o \u1ea3nh b\u00e0i vi\u1ebft trong theme Flatsome r\u1ed3i ph\u1ea3i kh\u00f4ng? H\u00f4m nay m\u00ecnh ti\u1ebfp t\u1ee5c h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n th\u00eam hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng \u0111\u1eb9p khi\u00a0hover \u1ea3nh s\u1ea3n ph\u1ea9m Woocommerce\u00a0nh\u00e9! Demo:\u00a0http:\/\/dienmay3.ninhbinhweb.info,\u00a0http:\/\/bds8.ninhbinhweb.info \u0110i\u1ec1u ki\u1ec7n & y\u00eau …<\/p>\n","protected":false},"author":1,"featured_media":101,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[26],"acf":[],"_links":{"self":[{"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/posts\/100"}],"collection":[{"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":3,"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":735,"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/posts\/100\/revisions\/735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/media\/101"}],"wp:attachment":[{"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chophanmem.samba.vn\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}