Bilder Hover im Container<\/title>\n <style>\n body {\n }\n\n main {\n padding: 48px 0;\n }\n\n .bild-liste {\n display: flex;\n flex-direction: column;\n gap: 40px;\n align-items: center;\n width: 100%;\n \n max-width: 700px;\n margin: 0 auto;\n padding: 32px 20px;\n background: #fff;\n border-radius: 18px;\n \n }\n .bild-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n min-height: 200px;\n }\n .hover-bild {\n transition: transform 0.5s cubic-bezier(.25,1,.5,1);\n width: 300px;\n height: 200px;\n border-radius: 14px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.10);\n z-index: 1;\n background: #fff;\n object-fit: cover;\n display: block;\n }\n .bild-text {\n opacity: 0;\n margin-left: 0;\n max-width: 0;\n overflow: hidden;\n transition:\n opacity 0.5s,\n margin-left 0.5s,\n max-width 0.5s,\n padding 0.5s;\n white-space: pre-line;\n font-size: 1.1em;\n background: #fff;\n padding: 20px 0;\n border-radius: 12px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.13);\n position: absolute;\n left: 200px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n min-width: 0;\n max-width: 400px;\n }\n .bild-wrapper:hover .hover-bild {\n transform: translateX(-120px) scale(1.07);\n }\n .bild-wrapper:hover .bild-text {\n opacity: 1;\n margin-left: 0px;\n pointer-events: auto;\n max-width: 20060px;\n padding: 20px 26px;\n }\n\n \/* Responsive *\/\n @media (max-width: 700px) {\n .container {\n max-width: 99vw;\n padding: 12px 2vw;\n }\n .bild-liste {\n max-width: 100%;\n }\n .hover-bild, .bild-wrapper {\n width: 92vw;\n min-width: unset;\n max-width: 99vw;\n }\n .hover-bild {\n width: 92vw;\n height: 55vw;\n max-height: 260px;\n }\n .bild-text {\n left: 60vw;\n max-width: 120px;\n font-size: 1em;\n padding: 12px 0;\n }\n .bild-wrapper:hover .bild-text {\n max-width: 120px;\n padding: 12px 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <main>\n \n <h2>\n <span style=\"\ncolor: #02998a;\ndisplay: inline-block;\nfont-size: 1.5em;\nfont-weight: bold;\ntransform: scaleX(2);\n\">|<\/span> \nIhr Garant f\u00fcr Qualit\u00e4t und Vertrauen\n<\/h2>\n \n <div class=\"bild-liste\">\n <div class=\"bild-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/hr.jupdialog.de\/wp-content\/uploads\/2025\/07\/DDV_DMS_2024_JuP-Dialog.jpg\" class=\"hover-bild\" alt=\"Bild 1\">\n <span class=\"bild-text\"><b>DDV-Qualit\u00e4tssiegel: <br>Gepr\u00fcfte Sicherheit und Qualit\u00e4t<\/b><br>\n\nAls Tr\u00e4ger des DDV-Qualit\u00e4tssiegels erf\u00fcllen wir h\u00f6chste Anforderungen an Datenschutz, Datensicherheit und Prozessqualit\u00e4t im Dialogmarketing. Das Siegel wird nur nach einer strengen unabh\u00e4ngigen Pr\u00fcfung vergeben und regelm\u00e4\u00dfig erneuert. F\u00fcr Sie bedeutet das: gepr\u00fcfte Zuverl\u00e4ssigkeit und volle DSGVO-Konformit\u00e4t<\/span>\n <\/div>\n <div class=\"bild-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/hr.jupdialog.de\/wp-content\/uploads\/2025\/07\/Zertifikat_2024-2027.jpg\" class=\"hover-bild\" alt=\"Bild 2\">\n <span class=\"bild-text\">\n <b>EQ-Zertifikat: <br>Best\u00e4tigung f\u00fcr gelebtes Qualit\u00e4tsmanagement<\/b><br>\n Mit dem EQ-Zertifikat weisen wir nach, dass unser Qualit\u00e4tsmanagementsystem h\u00f6chsten Standards entspricht. Die Auszeichnung wird nach einer unabh\u00e4ngigen Pr\u00fcfung vergeben und best\u00e4tigt, dass unsere Prozesse strukturiert, transparent und kontinuierlich verbessert werden. F\u00fcr Sie bedeutet das: gepr\u00fcfte Qualit\u00e4t, zuverl\u00e4ssige Abl\u00e4ufe und nachhaltige Kundenzufriedenheit.\n <\/span>\n <\/div>\n <\/div>\n <\/main>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f3db4c e-flex e-con-boxed e-con e-parent\" data-id=\"0f3db4c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36bff7f elementor-widget elementor-widget-spacer\" data-id=\"36bff7f\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bilder Hover im Container | Ihr Garant f\u00fcr Qualit\u00e4t und Vertrauen DDV-Qualit\u00e4tssiegel: Gepr\u00fcfte Sicherheit und Qualit\u00e4t Als Tr\u00e4ger des DDV-Qualit\u00e4tssiegels […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-687","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages\/687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=687"}],"version-history":[{"count":31,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages\/687\/revisions"}],"predecessor-version":[{"id":773,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages\/687\/revisions\/773"}],"wp:attachment":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t

<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n Bilder Hover im Container<\/title>\n <style>\n body {\n }\n\n main {\n padding: 48px 0;\n }\n\n .bild-liste {\n display: flex;\n flex-direction: column;\n gap: 40px;\n align-items: center;\n width: 100%;\n \n max-width: 700px;\n margin: 0 auto;\n padding: 32px 20px;\n background: #fff;\n border-radius: 18px;\n \n }\n .bild-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n min-height: 200px;\n }\n .hover-bild {\n transition: transform 0.5s cubic-bezier(.25,1,.5,1);\n width: 300px;\n height: 200px;\n border-radius: 14px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.10);\n z-index: 1;\n background: #fff;\n object-fit: cover;\n display: block;\n }\n .bild-text {\n opacity: 0;\n margin-left: 0;\n max-width: 0;\n overflow: hidden;\n transition:\n opacity 0.5s,\n margin-left 0.5s,\n max-width 0.5s,\n padding 0.5s;\n white-space: pre-line;\n font-size: 1.1em;\n background: #fff;\n padding: 20px 0;\n border-radius: 12px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.13);\n position: absolute;\n left: 200px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n min-width: 0;\n max-width: 400px;\n }\n .bild-wrapper:hover .hover-bild {\n transform: translateX(-120px) scale(1.07);\n }\n .bild-wrapper:hover .bild-text {\n opacity: 1;\n margin-left: 0px;\n pointer-events: auto;\n max-width: 20060px;\n padding: 20px 26px;\n }\n\n \/* Responsive *\/\n @media (max-width: 700px) {\n .container {\n max-width: 99vw;\n padding: 12px 2vw;\n }\n .bild-liste {\n max-width: 100%;\n }\n .hover-bild, .bild-wrapper {\n width: 92vw;\n min-width: unset;\n max-width: 99vw;\n }\n .hover-bild {\n width: 92vw;\n height: 55vw;\n max-height: 260px;\n }\n .bild-text {\n left: 60vw;\n max-width: 120px;\n font-size: 1em;\n padding: 12px 0;\n }\n .bild-wrapper:hover .bild-text {\n max-width: 120px;\n padding: 12px 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <main>\n \n <h2>\n <span style=\"\ncolor: #02998a;\ndisplay: inline-block;\nfont-size: 1.5em;\nfont-weight: bold;\ntransform: scaleX(2);\n\">|<\/span> \nIhr Garant f\u00fcr Qualit\u00e4t und Vertrauen\n<\/h2>\n \n <div class=\"bild-liste\">\n <div class=\"bild-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/hr.jupdialog.de\/wp-content\/uploads\/2025\/07\/DDV_DMS_2024_JuP-Dialog.jpg\" class=\"hover-bild\" alt=\"Bild 1\">\n <span class=\"bild-text\"><b>DDV-Qualit\u00e4tssiegel: <br>Gepr\u00fcfte Sicherheit und Qualit\u00e4t<\/b><br>\n\nAls Tr\u00e4ger des DDV-Qualit\u00e4tssiegels erf\u00fcllen wir h\u00f6chste Anforderungen an Datenschutz, Datensicherheit und Prozessqualit\u00e4t im Dialogmarketing. Das Siegel wird nur nach einer strengen unabh\u00e4ngigen Pr\u00fcfung vergeben und regelm\u00e4\u00dfig erneuert. F\u00fcr Sie bedeutet das: gepr\u00fcfte Zuverl\u00e4ssigkeit und volle DSGVO-Konformit\u00e4t<\/span>\n <\/div>\n <div class=\"bild-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/hr.jupdialog.de\/wp-content\/uploads\/2025\/07\/Zertifikat_2024-2027.jpg\" class=\"hover-bild\" alt=\"Bild 2\">\n <span class=\"bild-text\">\n <b>EQ-Zertifikat: <br>Best\u00e4tigung f\u00fcr gelebtes Qualit\u00e4tsmanagement<\/b><br>\n Mit dem EQ-Zertifikat weisen wir nach, dass unser Qualit\u00e4tsmanagementsystem h\u00f6chsten Standards entspricht. Die Auszeichnung wird nach einer unabh\u00e4ngigen Pr\u00fcfung vergeben und best\u00e4tigt, dass unsere Prozesse strukturiert, transparent und kontinuierlich verbessert werden. F\u00fcr Sie bedeutet das: gepr\u00fcfte Qualit\u00e4t, zuverl\u00e4ssige Abl\u00e4ufe und nachhaltige Kundenzufriedenheit.\n <\/span>\n <\/div>\n <\/div>\n <\/main>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f3db4c e-flex e-con-boxed e-con e-parent\" data-id=\"0f3db4c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36bff7f elementor-widget elementor-widget-spacer\" data-id=\"36bff7f\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bilder Hover im Container | Ihr Garant f\u00fcr Qualit\u00e4t und Vertrauen DDV-Qualit\u00e4tssiegel: Gepr\u00fcfte Sicherheit und Qualit\u00e4t Als Tr\u00e4ger des DDV-Qualit\u00e4tssiegels […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-687","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages\/687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=687"}],"version-history":[{"count":31,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages\/687\/revisions"}],"predecessor-version":[{"id":773,"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=\/wp\/v2\/pages\/687\/revisions\/773"}],"wp:attachment":[{"href":"https:\/\/hr.jupdialog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}