diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css index 3d6cc972a..f386e0048 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css @@ -1,10 +1,15 @@ .searchResult { - display: flex; + position: relative; margin: 20px 0; padding: 20px; width: 100%; - background-color: $white; color: inherit; +} + +.underlay { + @add-mixin cover; + + background-color: $white; transition: background 500ms; &:hover { @@ -14,6 +19,13 @@ } } +.overlay { + @add-mixin linkOverlay; + + position: relative; + display: flex; +} + .poster { flex: 0 0 170px; margin-right: 20px; diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js index 1a76c6f7a..ac48aa225 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js @@ -70,11 +70,13 @@ class AddNewMovieSearchResult extends Component { const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress }; return ( -
+
+ /> + +
{ isSmallScreen ? null : @@ -158,7 +160,7 @@ class AddNewMovieSearchResult extends Component { {overview}
- +