Make zoom more buttony

2 files changed, 34 insertions, 28 deletions

diff --git a/static/css/dump.css b/static/css/dump.css
index eb3959d..1a8c526 100755
--- a/static/css/dump.css
+++ b/static/css/dump.css
@@ -618,15 +618,22 @@ width:100;
 
 .msg-image-zoom {
     position: absolute;
-    bottom: 0px;
-    right: 0px;
-    opacity: 50%;
+    bottom: 5px;
+    right: 5px;
+    background-color: white;
+    opacity: 0.7;
 }
 
-.msg-image-zoom img {
+a.msg-image-zoom img.zoom-icon {
     height: 48px;
     width: 48px;
-    opacity: 100%;
+    opacity: .5;
+    border: 2px gray dashed;
+}
+
+a.msg-image-zoom img.zoom-icon:hover {
+    opacity: 1;
+    border: 2px solid black;
 }
 
 .msgDiv.favorite{
@@ -1702,37 +1709,35 @@ color:000;
 	border:0px;
 	z-index:4;	
 }
-#messageList img{
+#messageList img {
     max-width:400px;
     width: expression(this.width > 600 ? 600: true);
     max-height:400px;
     height: expression(this.width > 600 ? 600: true);
-	border:0px;
-	z-index:4;	
+    z-index:4;	
 }
-.logged-dump{ 
 
-background-color:#f0f9ff;
-text-overflow: ellipsis-word;
-	padding: 18px 18px 6px 18px;
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
-	text-transform: uppercase;
-
-margin-left:3px;
-	line-height:15px;
+.logged-dump {
+    background-color:#f0f9ff;
+    text-overflow: ellipsis-word;
+    padding: 18px 18px 6px 18px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    text-transform: uppercase;
+    margin-left:3px;
+    line-height:15px;
+    z-index:4;
+    line-height:20px;
+    text-align: left;
+}
 
+.editable {
+    color: #0AA;
+}
 
-	z-index:4;
-	line-height:20px;
-	text-align: left;
+.editing {
+    color: #F0F;
 }
-      .editable {
-         color: #0AA;
-      }
-      .editing {
-         color: #F0F;
-      }
       div#avatar {
 	overflow: hidden;
 	text-overflow: ellipsis;
diff --git a/static/js/pichat.js b/static/js/pichat.js
index 32727f1..2a994b0 100644
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -1052,7 +1052,8 @@ function initChatMsgs() {
         var zoomlink = $('<a>')
 	    .attr({'href': imgurl })
 	    .addClass('msg-image-zoom')
-	    .append($('<img>').attr('src', 'http://dump.fm/static/img/zoom.gif'))
+	    .append($('<img>').attr('src', 'http://dump.fm/static/img/zoom.gif')
+		    .addClass('zoom-icon'))
 	    .click(function() { window.open(imgurl); return false; });
         $(this).append(zoomlink);
     });