{"id":12847,"date":"2025-02-18T18:15:10","date_gmt":"2025-02-18T15:15:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/"},"modified":"2025-02-18T18:15:10","modified_gmt":"2025-02-18T15:15:10","slug":"genisletilebilir-simgeyle-resim-kutusu-hover-efekti","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/","title":{"rendered":"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti"},"content":{"rendered":"

<\/p>\n

Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti<\/p>\n

Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti olan “Geni\u015fletilebilir Simgeyle Resim Kutusu” efektini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, basit bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Daha sonra CSS ile stil verecek ve son olarak JavaScript ile etkile\u015fimlili\u011fi sa\u011flayaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131 fare imlecini resim kutusu \u00fczerinde gezdirdi\u011finde, bir simge geni\u015fleyerek g\u00f6rsel bir geri bildirim sunacakt\u0131r. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve interaktif bir tasar\u0131m sa\u011flayacakt\u0131r.<\/p>\n

HTML Yap\u0131s\u0131<\/h2>\n

\u0130lk ad\u0131m\u0131m\u0131z, resim kutular\u0131n\u0131 ve geni\u015fletilebilir simgeleri i\u00e7eren temel HTML yap\u0131s\u0131n\u0131 olu\u015fturmak. A\u015fa\u011f\u0131daki kodu inceleyebilirsiniz:<\/p>\n

\n<div class=\"image-box\">\n  <img src=\"resim.jpg\" alt=\"Resim\">\n  <div class=\"expand-icon\">+<\/div>\n<\/div>\n<\/code><\/pre>\n
Burada, image-box s\u0131n\u0131f\u0131, resim ve simgeyi i\u00e7eren kapsay\u0131c\u0131d\u0131r.  expand-icon s\u0131n\u0131f\u0131 ise geni\u015fletilecek simgeyi tan\u0131mlar.  Siz kendi resimlerinizi ve i\u00e7eriklerinizi buraya ekleyebilirsiniz.  Bu basit yap\u0131y\u0131 daha sonra CSS ve JavaScript ile zenginle\u015ftirece\u011fiz. Unutmay\u0131n ki bu sadece bir \u00f6rnektir ve ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u00f6zelle\u015ftirebilirsiniz.<\/p>\n
CSS Stili<\/h2>\n
\u015eimdi, HTML yap\u0131s\u0131na g\u00f6rsel stil eklemek i\u00e7in CSS kullanaca\u011f\u0131z.  A\u015fa\u011f\u0131da, resim kutusu ve simge i\u00e7in baz\u0131 stil \u00f6rnekleri bulunmaktad\u0131r:<\/p>\n
\n.image-box {\n  position: relative;\n  width: 200px;\n  height: 200px;\n  overflow: hidden; \/* Resmin ta\u015fmas\u0131n\u0131 \u00f6nler *\/\n}\n\n.image-box img {\n  width: 100%;\n  height: 100%;\n  transition: transform 0.3s ease; \/* Ak\u0131c\u0131 ge\u00e7i\u015f i\u00e7in *\/\n}\n\n.image-box:hover img {\n  transform: scale(1.1); \/* Fare \u00fczerine gelince b\u00fcy\u00fct\u00fcr *\/\n}\n\n.expand-icon {\n  position: absolute;\n  bottom: 10px;\n  right: 10px;\n  font-size: 24px;\n  color: white;\n  background-color: rgba(0, 0, 0, 0.5);\n  padding: 5px 10px;\n  border-radius: 5px;\n  opacity: 0;\n  transition: opacity 0.3s ease; \/* Ak\u0131c\u0131 ge\u00e7i\u015f i\u00e7in *\/\n}\n\n.image-box:hover .expand-icon {\n  opacity: 1; \/* Fare \u00fczerine gelince g\u00f6r\u00fcn\u00fcr olur *\/\n}\n<\/code><\/pre>\n
Bu CSS kodlar\u0131, resim kutusu boyutlar\u0131n\u0131, resim \u00f6l\u00e7ekleme animasyonunu ve geni\u015fletilebilir simgenin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol eder.  Bu ayarlar\u0131, kendi tasar\u0131m\u0131n\u0131za uygun olarak de\u011fi\u015ftirebilirsiniz. \u00d6rne\u011fin, renkleri, boyutlar\u0131 ve ge\u00e7i\u015f s\u00fcrelerini \u00f6zelle\u015ftirebilirsiniz.<\/p>\n
JavaScript Etkile\u015fimi (Opsiyonel)<\/h2>\n
Bu ad\u0131m tamamen iste\u011fe ba\u011fl\u0131d\u0131r.  JavaScript kullanarak, simgeye t\u0131kland\u0131\u011f\u0131nda daha geli\u015fmi\u015f etkile\u015fimler ekleyebilirsiniz. \u00d6rne\u011fin, bir \u0131\u015f\u0131k kutusu a\u00e7abilir veya daha fazla bilgi g\u00f6sterebilirsiniz. Bunun i\u00e7in  JavaScript’in  addEventListener fonksiyonunu kullanabilirsiniz.<\/p>\n
Daha geli\u015fmi\u015f \u00f6rnekler ve detayl\u0131 a\u00e7\u0131klamalar i\u00e7in  kendi web sitemi<\/a>ni ziyaret edebilirsiniz. Ayr\u0131ca,  orijinal makaleye<\/a> de g\u00f6z atabilirsiniz.<\/p>\n
Umar\u0131m bu makale, geni\u015fletilebilir simgeyle resim kutusu hover efekti olu\u015fturman\u0131zda size yard\u0131mc\u0131 olmu\u015ftur.  Web sitenizin kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in bu ve benzeri teknikleri kullanabilirsiniz. Ba\u015far\u0131lar!<\/p>\n
#Etiketler: hover efekti, geni\u015fletilebilir simge, resim kutusu, HTML, CSS, JavaScript, web geli\u015ftirme, animasyon, kullan\u0131c\u0131 deneyimi, interaktif tasar\u0131m
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-12847","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nGeni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti<\/title>\n<meta name=\"description\" content=\"Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti olan "Geni\u015fletilebilir Simgeyle Resim Kutusu" efektini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, basit bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Daha sonra CSS ile stil verecek ve son olarak JavaScript ile etkile\u015fimlili\u011fi sa\u011flayaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131 fare imlecini resim kutusu \u00fczerinde gezdirdi\u011finde, bir simge geni\u015fleyerek g\u00f6rsel bir geri bildirim sunacakt\u0131r. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve interaktif bir tasar\u0131m sa\u011flayacakt\u0131r.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti olan "Geni\u015fletilebilir Simgeyle Resim Kutusu" efektini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, basit bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Daha sonra CSS ile stil verecek ve son olarak JavaScript ile etkile\u015fimlili\u011fi sa\u011flayaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131 fare imlecini resim kutusu \u00fczerinde gezdirdi\u011finde, bir simge geni\u015fleyerek g\u00f6rsel bir geri bildirim sunacakt\u0131r. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve interaktif bir tasar\u0131m sa\u011flayacakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-18T15:15:10+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti\",\"datePublished\":\"2025-02-18T15:15:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/\"},\"wordCount\":403,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/\",\"name\":\"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-02-18T15:15:10+00:00\",\"description\":\"Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti olan \\\"Geni\u015fletilebilir Simgeyle Resim Kutusu\\\" efektini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, basit bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Daha sonra CSS ile stil verecek ve son olarak JavaScript ile etkile\u015fimlili\u011fi sa\u011flayaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131 fare imlecini resim kutusu \u00fczerinde gezdirdi\u011finde, bir simge geni\u015fleyerek g\u00f6rsel bir geri bildirim sunacakt\u0131r. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve interaktif bir tasar\u0131m sa\u011flayacakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti","description":"Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti olan \"Geni\u015fletilebilir Simgeyle Resim Kutusu\" efektini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, basit bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Daha sonra CSS ile stil verecek ve son olarak JavaScript ile etkile\u015fimlili\u011fi sa\u011flayaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131 fare imlecini resim kutusu \u00fczerinde gezdirdi\u011finde, bir simge geni\u015fleyerek g\u00f6rsel bir geri bildirim sunacakt\u0131r. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve interaktif bir tasar\u0131m sa\u011flayacakt\u0131r.","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:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/","og_locale":"tr_TR","og_type":"article","og_title":"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti","og_description":"Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti olan \"Geni\u015fletilebilir Simgeyle Resim Kutusu\" efektini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, basit bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Daha sonra CSS ile stil verecek ve son olarak JavaScript ile etkile\u015fimlili\u011fi sa\u011flayaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131 fare imlecini resim kutusu \u00fczerinde gezdirdi\u011finde, bir simge geni\u015fleyerek g\u00f6rsel bir geri bildirim sunacakt\u0131r. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve interaktif bir tasar\u0131m sa\u011flayacakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-02-18T15:15:10+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti","datePublished":"2025-02-18T15:15:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/"},"wordCount":403,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/","url":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/","name":"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-02-18T15:15:10+00:00","description":"Merhaba! Bu makalede, web sitenizin g\u00f6rsel \u00e7ekicili\u011fini art\u0131racak, etkileyici bir hover efekti olan \"Geni\u015fletilebilir Simgeyle Resim Kutusu\" efektini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, basit bir HTML yap\u0131s\u0131 olu\u015fturaca\u011f\u0131z. Daha sonra CSS ile stil verecek ve son olarak JavaScript ile etkile\u015fimlili\u011fi sa\u011flayaca\u011f\u0131z. Bu sayede, kullan\u0131c\u0131 fare imlecini resim kutusu \u00fczerinde gezdirdi\u011finde, bir simge geni\u015fleyerek g\u00f6rsel bir geri bildirim sunacakt\u0131r. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve interaktif bir tasar\u0131m sa\u011flayacakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/genisletilebilir-simgeyle-resim-kutusu-hover-efekti\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Geni\u015fletilebilir Simgeyle Resim Kutusu Hover Efekti"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=12847"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12847\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=12847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=12847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=12847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}