speaker icon on images

1 files changed, 27 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 47925ef..7e0b302 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -117,16 +117,19 @@
 }
 .speaker-icon {
   position: absolute;
-  top: 0;
-  left: -5.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
+  cursor: pointer;
   transition: opacity 0.2s;
   padding: 1.5rem;
 }
-.intro_paragraph .speaker-icon {
+.paragraph .speaker-icon {
+  top: -1.5rem;
+  left: -5.5rem;
+}
+.paragraph.intro_paragraph .speaker-icon {
   top: -0.75rem;
 }
 .speaker-icon svg {
@@ -147,8 +150,16 @@
 .player-transcript .media {
   width: 100%;
 }
-.player-transcript .media.image img {
+.player-transcript .media.image {
+  text-align: center;
+}
+.player-transcript .media.image .image-container {
+  position: relative;
   margin: 0 auto;
+  display: inline-block;
+}
+.player-transcript .media.image img {
+  cursor: pointer;
   display: block;
   max-width: 100%;
   max-height: 90vh;
@@ -160,6 +171,7 @@
   background-position: center center;
 }
 .player-transcript .media .citation {
+  text-align: left;
   width: 45rem;
   margin: 0 auto;
   padding: 1rem 0;
@@ -170,6 +182,17 @@
   pointer-events: none;
   padding: 1rem 0;
 }
+.player-transcript .media.image .speaker-icon {
+  bottom: 0;
+  right: 0;
+  opacity: 1;
+}
+.player-transcript .media.image .speaker-icon:hover svg {
+  background: white;
+}
+.player-transcript .media.image .speaker-icon:hover svg path {
+  fill: black;
+}
 
 /* intro */