{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Продолжаем тему магии кодирования. В этой статье найдете скрипты для создания эффекта \"лупы\" при наведении курсора на картинку.","type":"unstyled","key":"6akhl"},{"data":{"image":{"id":"62a33785cbfb6327433a6b0c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fmf1k"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":14,"offset":25}],"inlineStyleRanges":[],"text":"Видео по этой теме можно посмотреть тут. Итак, приступим. Сперва создаем страницу, добавляем блоки html и css. В блок html пишем код ниже.","type":"unstyled","key":"9gjoc"},{"data":{"image":{"id":"62a333d99bc8c1016936a3f1"},"images":[{"id":"62a333d99bc8c1016936a3f1"},{"id":"62a33425cdba314ac41da333"},{"id":"62a33432cbfb63274332dec3"},{"id":"62a3344dcbfb632743331a72"}],"contents":{"62a333d99bc8c1016936a3f1":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9fet8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8l68d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"1gh39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"bh1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8amjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"98avo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"39g4c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":95,"offset":5,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"d37ac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"cvoru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"evgo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":95,"offset":5,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"aomd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fuvee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"45pme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":95,"offset":5,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"b41fo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"a2ck4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"7cdaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fpuo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\t","type":"unstyled","key":"ae9s4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если картинки должны быть НЕ кликабельными, то код ниже","type":"unstyled","key":"9vd5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fu1ap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"bh3fj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"1lqp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":5,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"2mjhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"5s2qk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":3,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"v7lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"eb7i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":5,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"41qec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"ab7mo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":5,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"cbo2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"3g4uu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2d0tb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"b0nd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"sbac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На скринах показано как взять ссылку на картинку из файлового хранилища","type":"unstyled","key":"4ah0m"},{"data":{"image":{"id":"62a3354e9bc8c10169399342"},"images":[{"id":"62a3354e9bc8c10169399342"},{"id":"62a335924eb1347471d067dc"},{"id":"62a3359c5b218312b6c2ec24"}],"contents":{"62a3354e9bc8c10169399342":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8fqhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда ссылки на изображения добавлены, переходим к добавлению стилей нашего блока. Открываем css блок и пишем код ниже.","type":"unstyled","key":"un2q"},{"data":{"image":{"id":"62a335d2607c093511cff601"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5dae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b0tqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".block1 {","type":"blockquote","key":"g3eh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%;","type":"blockquote","key":"frgjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: flex;","type":"blockquote","key":"dghem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"flex-direction: row;","type":"blockquote","key":"bpvr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"flex-wrap: nowrap;","type":"blockquote","key":"bksjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"justify-content: space-between;","type":"blockquote","key":"7kn2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"align-items: center;","type":"blockquote","key":"e80ha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"1ijrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".block1 {","type":"blockquote","key":"fssoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding:20px 100px 20px 100px;","type":"blockquote","key":"aucla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"bcra5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".block1 img {","type":"blockquote","key":"dm56d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%;","type":"blockquote","key":"kb56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100%;","type":"blockquote","key":"ekfuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition: transform 0.5s;","type":"blockquote","key":"4386l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"el3nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"9tr46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".photo1:hover img {","type":"blockquote","key":"br4bl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transform: scale(1.7);","type":"blockquote","key":"cb9cp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"11sno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".photo1 {","type":"blockquote","key":"72uvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" overflow: hidden;","type":"blockquote","key":"7imq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Margin: 5px;","type":"blockquote","key":"el62p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"4pa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4l3fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объясняю важные параметры: ","type":"header-three","key":"f12dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения отступов ваших изображений от края блока. Последовательность сверху-справа-снизу-слева","type":"unstyled","key":"37lr2"},{"data":{"image":{"id":"62a33625976862692a3f6d2a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"361cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Масштаб увеличения \"лупы\". Чем больше значение, тем больше приближает.","type":"unstyled","key":"26tc7"},{"data":{"image":{"id":"62a3368a51bab32d0f301e98"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6bafp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скорость приближения изображения. Чем больше значение, тем медленнее приближение.","type":"unstyled","key":"3h06o"},{"data":{"image":{"id":"62a336c1976862692a40bdce"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"71del"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":9,"offset":34},{"key":2,"length":57,"offset":67}],"inlineStyleRanges":[{"length":57,"offset":67,"style":"BOLD"}],"text":"Посмотреть видео данной настройки можно тут\n\nМожет быть интересно:\nСоздаем картинки с увеличением при наведении. Геткурс CSS","type":"unstyled","key":"b13eh"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":9,"offset":35}],"inlineStyleRanges":[],"text":"Было полезно? Поделись с другими и ПОДПИШИСЬ на канал)","type":"unstyled","key":"3920e"},{"data":{"image":{"id":"62a3375cc45e772bdfa5383a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f1gn7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"},{"length":11,"offset":63,"style":"BOLD"},{"length":9,"offset":83,"style":"BOLD"}],"text":"ФЕЯриЧНЫЙ ИНТЕНСИВ: CSS. ВИЗУАЛЬНОЕ ПРЕОБРАЖЕНИЕ ОНЛАЙН-ШКОЛЫ. Подробности смотрите в видео.","type":"unstyled","key":"90sgk"},{"data":{"embedData":{"type":"yandex-zen-video","uuid":"vTBS-aMbwXBE","previewImageData":{"id":"62dba5b8be7abe20b162f4fd","groupId":4581585,"imageName":"pub_62dba5829d059c55fe9fd860_62dba5b8be7abe20b162f4fd","namespace":"zen_doc","meta":{"mainColor":"#000000","origFormat":"JPEG"}},"publisherId":"5de11a175d636200b075a8d2","publicationId":"62dba5829d059c55fe9fd860","publisherName":"ДзЫнь.Блог про онлайн-школы на Геткурсе","publisherAvatar":{"id":"6260442b2998cf141a9c63f1","groupId":246004,"imageName":"pub_5de11a175d636200b075a8d2_6260442b2998cf141a9c63f1","namespace":"zen-logos","meta":{"mainColor":"#F8F8F8","origFormat":"PNG"}},"isPublisherVerified":false,"publishTime":1658744138323,"title":"CSS. ВИЗУАЛЬНОЕ ПРЕОБРАЖЕНИЕ ОНЛАЙН-ШКОЛЫ","duration":262000,"customParams":{"signed_url":"9UlDFup8C8F2S4C2znDaw-sNJ1XQoGDvcZ4gEHPbN1mCIrw_s-NKDE6Vm2edwxhlFPzGijYBPXg"}}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"ea40u"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":21,"offset":43}],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"},{"length":31,"offset":33,"style":"BOLD"}],"text":"Присоединиться к интенсиву можно по ссылке https://clck.ru/sPSgV","type":"unstyled","key":"4he1g"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":13,"offset":210}],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"},{"length":34,"offset":189,"style":"BOLD"}],"text":"Вы начинающий технический специалист и нужна практика по настройкам? Или не хватает проектов для оформления кейсов? Приходите в ТЗшки. Наберетесь опыта и сформируете кейсы за короткий срок. Подробнее по ссылке clck.ru/ggGhM","type":"unstyled","key":"1vmb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы запускаете онлайн проект и не знаете с чего начать, или вам нужна консультация по конкретным задачам, обращайтесь.","type":"unstyled","key":"c7a41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделать это можно любым удобным способом:","type":"unstyled","key":"ipec"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":18,"offset":44},{"key":7,"length":19,"offset":63},{"key":8,"length":15,"offset":95}],"inlineStyleRanges":[],"text":"Кристина-технический специалист онлайн-школ\nВК vk.me/krista_ap\nТелеграм @krista_ap\n89966906964\nВатсап Кристина","type":"unstyled","key":"eqoq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"AdQiqTDcrqnhS95CjIRM"}],"entityMap":{"0":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/video/watch/62a337c05b218312b6c70bd6"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/video/watch/62a337c05b218312b6c70bd6"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/video/watch/62a324a2976862692a160c19"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://zen.yandex.ru/id/5de11a175d636200b075a8d2"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://clck.ru/sPSgV","url":"https://clck.ru/sPSgV"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"http://clck.ru/ggGhM"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://vk.me/krista_ap"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://t.me/krista_ap"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"url":"http://api.whatsapp.com/send?phone=79966906964"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}