diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 1988dc5e..b48d03be 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -182,8 +182,15 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}
-                   onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+            <aside className={classes}
+                style={{
+                    opacity: this.props.opacity,
+                    pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
+                }}
+                onKeyDown={ this._onKeyDown }
+                onFocus={ this._onFocus }
+                onBlur={ this._onBlur }
+            >
                 { topBox }
                 <CallPreview ConferenceHandler={VectorConferenceHandler} />
                 <RoomList
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 0225f765..c32c0646 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -351,7 +351,12 @@ module.exports = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}>
+            <aside className={classes}
+                style={{
+                    opacity: this.props.opacity,
+                    pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
+                }}
+            >
                 <div className="mx_RightPanel_header">
                     <div className="mx_RightPanel_headerButtonGroup">
                         {headerButtons}