Hover over buttons for a Netflix-style effect

https://i.stack.imgur.com/7SxaL.gif

Is there a way to create a hover effect similar to the one shown in the gif? Currently, I am able to zoom it on hover but how can I also incorporate buttons and other details when hovering over it?

This is what I have tried so far:

.Row_poster:hover { 
       transform: scale(1.3);
       overflow: visible;
       cursor: pointer;
       z-index: 98;
    }
javascripthtmlcssreactjs

Answer №1

Pure CSS Ways

While JavaScript can achieve the same effect, here are some methods using pure CSS.

Approach 1: Utilize ::after and ::before.

Check out:

body,
html {
  height: 100%;
  width: 100%;
  background: #141414;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}

.square {
  background-size: cover!important;
  background-position: center!important;
  display: inline-block;
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;
}

.square:hover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
  border-radius: 10px 10px 0 0;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;
}

.square::after {
  position: relative;
  top: 100px;
  display: block;
  background: #18181818;
  box-shadow: 0 0 2px #000a;
  color: #fff;
  width: 150px;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  opacity: 0;
  border-radius: 0 0 10px 10px;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
}

.square:hover::after {
  opacity: 1;
}

.square.one {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one:hover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one::after {
  content: 'Never Gonna Give You Up!';
}
<div class="square one"></div>

This method is recommended if your caption styling isn't too complex.

Approach 2: Use distinct elements

This approach works well regardless of how customized your captions are.

body,
html {
  height: 100%;
  width: 100%;
  background: #111;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}

.square {
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;
}

.square .cover {
  width: 100%;
  height: 100px;
  border-radius: 10px 10px 0 0;
  background-size: cover!important;
  background-position: center!important;
}

.square .text {
  display: none;
  background: #181818;
  color: #fff;
  width: 100%;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
  border-radius: 0 0 10px 10px;
}

.square:hover {
  border-radius: 10px;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;
}

.square:hover .text {
  display: block;
}

.square.one .cover {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one:hover .cover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
<div class="square one">
  <div class="cover"></div>
  <div class="text">
    Never Gonna Give You Up!
  </div>
</div>

The Outcome

Opt for Approach 2. It closely resembles the animated image.

body,
html {
  height: 100%;
  width: 100%;
  background: #141414;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.square {
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;
}

.square .cover {
  width: 100%;
  height: 100px;
  border-radius: 10px 10px 0 0;
  background-size: cover!important;
  background-position: center!important;
}

.square .text {
  display: none;
  background: #181818;
  color: #fff;
  width: 100%;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
  border-radius: 0 0 10px 10px;
}

.square:hover {
  border-radius: 10px;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;
}

.square:hover .text {
  display: block;
}

.square.one .cover {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one:hover .cover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square .text .info {
  font-size: 8px;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icons :nth-child(3) {
  margin-left: auto;
}

icons span{
  border-radius: 50%;
  border: 1px solid #777;
  width: 18px;
  height: 18px;
  margin-right: 2px;

  font-size: 12px;
  text-align: center;
  line-height: 18px;
  font-weight: 1000;
  overflow: hidden;
}

.rating {
  border: 0.1px solid white;
  padding: 1px 2px;

}
.match {
  color: green;
  font-weight: bold;
}
<div class="square one">
  <div class="cover"></div>
  <div class="text">
    <div class="icons">
      <span>:)</span>
      <span>O</span>
      <span>V</span>
    </div>
    <div class="info">
      <span class="match">98% Match</span>
      <span class="rating">18+</span>
      <span class="seasons">5 Seasons</span>
    </div>
  </div>
</div>

Answer №2

Greetings Harsh,

Take a peek at the code below that I have compiled to see if it aligns with your intended outcome, buddy.

$(document).ready(function () {
                $(document).on('mouseenter', '.transformar', function () {
                    $(this).find(".playButtons").show('slow');
                }).on('mouseleave', '.transformar', function () {
                    $(this).find(".playButtons").hide();
                });
            });
.transformar {
display:block;
height:150px;
transition: transform 2s;
}

.playButtons{display: none}

.transformar:hover{
transform: scale(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='transformar' align="center">

<img src="https://i.pinimg.com/originals/e1/d0/1b/e1d01b1b7f602d223afc747fcbced364.jpg" height="150" alt="Netflix Example">
<h2>Filme do Netflix</h2>
<div id="#botones" class="playButtons">
<button type="button">PLAY EPISODE</button>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submit a collection of images and an object to the server using ReactJS

I'm currently working with Reactjs on the frontend. In order to set the profile picture to state, I've implemented the following code: handleImageChange = (event) => { event.preventDefault(); var file = event.target.files[ ...

javascriptreactjsaxiosfetch

Guide on utilizing AngularJS Filter service without HTML for Chrome extension development

Currently, I am attempting to utilize the filter service in AngularJS within my Chrome extension. However, I am unsure of how to properly obtain and inject it into my function. At this time, my code looks like: chrome.contextMenus.onClicked.addListener(fu ...

javascriptangularjsgoogle-chrome-extension

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

jqueryhtml

What could be causing my click event to fail to register after sorting a WebGrid with a click?

Running into an issue with my webgrid and search button. It works perfectly if I search first, updating the grid with results. But when I click on a header to sort the grid, the search button stops working. Can't seem to figure out how to solve this d ...

javascriptc#jqueryasp.net-mvc

Struggling with identifying errors in the Javascript code for my assignment

My code is giving me trouble and I could really use some assistance You can find my code in this GitHub folder: link. To see the project in action, visit this page on GitHub Pages: link. The task involves iterating over an array of names and printing eit ...

javascripthtmldebuggingweb

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

How can I create a grid with 4 items where the fourth item is taller than the others, determining the overall height of the grid? Is it possible to limit the height of the fourth item (h4) to match the height of the first item (h1) so that h4 = Grid height ...

csstypescriptmaterial-uicss-grid

Clicking on an embedded YouTube video will automatically redirect you to the video's

Hey there, I've added an embedded video to my website and I'm wondering if it's possible to redirect users to a new site when they click the play button? Thanks in advance! ...

javascriptphphttp-redirectyoutube

Converting HTML to CSV using PHP

I need assistance with exporting MySQL fields to CSV. I have successfully exported all fields except the one that contains HTML content. My MySQL table is structured as follows: Name: Address: Profile: The 'Name' and 'Address' fields ...

phphtmlmysqlarrayscsv

Encountering the React Native error message "TypeError: Object(...) is not a function" while using react navigation stack

I am currently facing an issue with my react-navigation-stack. My suspicion lies in the dependencies, but I am uncertain whether that is the root cause. The objective at hand is to create a text redirecting to another page. If there is any irrelevant code, ...

javascriptreactjsreact-nativereact-navigation

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

When making a request to the 500px API using $http for popular photos, the response object is successfully returned. However, I am facing difficulty in pushing the retrieved photo items to the view. Below is my current controller code: meanApp.controller ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

The program is unable to locate the file named npx create-react-app myapp

Whenever I attempt to create a React app using the command: npx create-react-app myapp An error message pops up stating: "PS C:\Users\yashj\OneDrive\Desktop\messaging_app> npx create-react-app myapp Program 'npx.cmd&a ...

reactjs

What could be causing my data to shift after refreshing in Firefox with the F5 key?

My webpage has four tables, each containing rows with two text boxes filled with numeric values from the server. However, something peculiar occurs. When I add data to a row, let's say row 1, and then refresh the page, two values are mysteriously mov ...

javascriptjqueryfirefox

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

htmlcss

Assessing the performance of YUi and BackBone

As I embark on a new project, one of the crucial decisions to make is regarding the architecture. Currently, I am contemplating the selection of front-end components. I plan to utilize HTML5, CSS3, and Javascript for this purpose. When it comes to choos ...

htmlcssframeworksbackbone.jsyui

JavaScript constructor functions may trigger ReSharper warnings for naming convention

When it comes to JavaScript coding, I personally prefer using PascalCase for constructor functions and camelCase for other functions. It seems like my ReSharper settings are aligned with this convention. However, when I write code like the following: func ...

javascriptnaming-conventionsresharper

Getting Started with CSS Alignment - A Novice's Guide

Recently, I embarked on my journey to learn HTML and CSS with the ambition of creating a login page. Although I've successfully crafted a basic version, I'm encountering an issue where the input boxes and labels are misaligned, giving off an unpr ...

htmlcss

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property. Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the # ...

javascriptjqueryhtmlcss

AngularJS attempting to conceal the popup menu upon clicking outside of the designated area

My HTML structure looks like this: <div> <a href="" ng-click="$scope.show_menu = !$scope.show_menu">Options</a> <div class="options_box" ng-show="$scope.show_menu"> <button>Option1</button> ... ...

javascriptjqueryangularjs

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

javascripthtmlreactjsmaterial-ui

Redirecting script upon successful connection detection

I have created a script that checks for internet connectivity using an image, and redirects if internet is available. However, the issue is that it caches the images, leading to attempts to load them even when offline. Is there a different approach I can ...

javascripthtml