{"id":103,"date":"2019-11-14T10:37:09","date_gmt":"2019-11-14T03:37:09","guid":{"rendered":"http:\/\/shopnet.ninhbinhweb.biz\/?p=103"},"modified":"2021-05-24T20:40:18","modified_gmt":"2021-05-24T13:40:18","slug":"them-hieu-ung-anh-sang-khi-hover-vao-anh-bai-viet-trong-theme-flatsome","status":"publish","type":"post","link":"https:\/\/hoclamdep.samba.vn\/them-hieu-ung-anh-sang-khi-hover-vao-anh-bai-viet-trong-theme-flatsome\/","title":{"rendered":"Th\u00eam hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng khi hover v\u00e0o \u1ea3nh b\u00e0i vi\u1ebft trong theme Flatsome"},"content":{"rendered":"

Ch\u00e0o c\u00e1c b\u1ea1n, n\u1ebfu ai \u0111\u1ec3 \u00fd c\u00f3 th\u1ec3 th\u1ea5y c\u00e1c m\u1eabu website g\u1ea7n \u0111\u00e2y c\u1ee7a Ninh B\u00ecnh Web m\u00ecnh hay s\u1eed d\u1ee5ng hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng tr\u01b0\u1ee3t l\u1ea5p l\u00e1nh khi r\u00ea chu\u1ed9t v\u00e0o \u1ea3nh b\u00e0i vi\u1ebft. C\u00f3 m\u1ed9t s\u1ed1 b\u1ea1n th\u00edch hi\u1ec7u \u1ee9ng CSS \u0111\u00f3 v\u00e0 mu\u1ed1n m\u00ecnh ch\u1ec9 c\u00e1ch l\u00e0m. Do \u0111\u00f3, h\u00f4m nay m\u00ecnh vi\u1ebft h\u01b0\u1edbng d\u1eabn cho c\u00e1c b\u1ea1n kh\u00e1c c\u00f3 th\u1ec3 l\u00e0m theo lu\u00f4n!<\/p>\n

Demo:<\/strong>\u00a0http:\/\/bds7.ninhbinhweb.info<\/a><\/p>\n

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

B\u00e0i vi\u1ebft n\u00e0y m\u00ecnh ch\u1ec9 cho c\u00e1c b\u1ea1n m\u1edbi h\u1ecdc l\u00e0m website WordPress, v\u1edbi m\u1ee5c \u0111\u00edch l\u00e0m sao ch\u1ec9 c\u1ea7n copy \u2013 paste l\u00e0 c\u00f3 th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c (\u0111\u00f4i khi kh\u00f4ng c\u1ea7n hi\u1ec3u). Do \u0111\u00f3, l\u01b0u \u00fd gi\u00fap m\u00ecnh m\u1ed9t s\u1ed1 \u0111i\u1ec1u sau!<\/p>\n

    \n
  • N\u1ec1n t\u1ea3ng: WordPress (khuy\u1ebfn kh\u00edch WP 5 tr\u1edf l\u00ean)<\/li>\n
  • Theme Flatsome<\/li>\n<\/ul>\n

    Demo m\u00ecnh l\u00e0m website s\u1eed d\u1ee5ng theme Flatsome n\u00ean b\u1ea1n n\u00e0o \u0111ang c\u00f3 theme Flatsome th\u00ec c\u1ee9 an t\u00e2m ho\u00e0n to\u00e0n, ch\u1ec9 c\u1ea7n copy \u2013 paste theo \u0111\u00fang nh\u01b0 h\u01b0\u1edbng d\u1eabn c\u1ee7a m\u00ecnh l\u00e0 OK. Nh\u1eefng b\u1ea1n kh\u00e1c kh\u00f4ng s\u1eed d\u1ee5ng theme Flatsome th\u00ec c\u00f3 th\u1ec3 li\u00ean h\u1ec7 m\u00ecnh support ri\u00eang nh\u00e9!<\/p>\n

    T\u1ea1o hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng l\u1ea5p l\u00e1nh khi hover v\u00e0o \u1ea3nh b\u00e0i vi\u1ebft<\/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.post-item .box-image.\u00a0<\/strong>Do \u0111\u00f3, b\u1ea5t c\u1ee9 b\u00e0i vi\u1ebft 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
    <\/div>\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>post<\/span>–<\/span>item<\/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><\/div>\n
    animation<\/span>:<\/span>shine<\/span> .<\/span>75s<\/span>}<\/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>post<\/span>–<\/span>item<\/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 Ninh B\u00ecnh Web. 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, n\u1ebfu ai \u0111\u1ec3 \u00fd c\u00f3 th\u1ec3 th\u1ea5y c\u00e1c m\u1eabu website g\u1ea7n \u0111\u00e2y c\u1ee7a Ninh B\u00ecnh Web m\u00ecnh hay s\u1eed d\u1ee5ng hi\u1ec7u \u1ee9ng \u00e1nh s\u00e1ng tr\u01b0\u1ee3t l\u1ea5p l\u00e1nh khi r\u00ea chu\u1ed9t v\u00e0o \u1ea3nh b\u00e0i vi\u1ebft. C\u00f3 m\u1ed9t s\u1ed1 b\u1ea1n th\u00edch hi\u1ec7u \u1ee9ng CSS \u0111\u00f3 v\u00e0 mu\u1ed1n m\u00ecnh ch\u1ec9 c\u00e1ch l\u00e0m. Do \u0111\u00f3, h\u00f4m…<\/p>\n","protected":false},"author":1,"featured_media":658,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[10],"_links":{"self":[{"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/posts\/103"}],"collection":[{"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":2,"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":696,"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/posts\/103\/revisions\/696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/media\/658"}],"wp:attachment":[{"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hoclamdep.samba.vn\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}