Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[liv-in-sky]

hallo,

weiß jemand, wie man ein mouseover für ein image in die vis einfügt - habe es über css versucht - im editor wird es angezeigt - in chrome leider nicht - hat da schon jmd erfolg gehabt

[liv-in-sky]

@Glasfaser danke für deine antwort - aber bei mir funktioniert deine lösung nicht

habe es so lösen können

.zoom {
  
  background-color: green;
  transition: transform .5s; /* Animation */
 
}

.zoom:hover {
  transform: scale(2.5) translate(50px, -100px) !important;
   z-index:999;
}

[Glasfaser]

@liv-in-sky

Meinst Du so etwas , funktioniert auch in Chrome.

vis - Google Chrome 2019-07-28 23-00-03.mp4

 .myButtonLink {
  display: block;
  width: 100px;
  height: 100px;
  background: url('/vis.0/Wohnen/Handy.png') bottom;
  text-indent: -99999px;
}

.myButtonLink:hover {
  background-position: 0 0;
}

Hier das Widget

Spoiler

[{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"","class":"myButtonLink"},"style":{"left":"537px","top":"108px","z-index":"100","width":"200px","height":"477px"},"widgetSet":"basic"}]

[liv-in-sky]

@Glasfaser danke für deine antwort - aber bei mir funktioniert deine lösung nicht

habe es so lösen können

.zoom {
  
  background-color: green;
  transition: transform .5s; /* Animation */
 
}

.zoom:hover {
  transform: scale(2.5) translate(50px, -100px) !important;
   z-index:999;
}

[Glasfaser]

@liv-in-sky

komisch das es bei dir nicht funktioniert !?

Deine Lösung mit dem Zoom funktioniert bei mir … sieht gut aus :+1: