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

Expo SDK is essential for the proper functioning of Expo. It is required to run React Native built APK files

After developing my app using Expo, I successfully ran it on both iOS and Android emulators. However, when attempting to generate an APK file with the cd android && ./gradlew assembleRelease command, everything seemed fine at first. But upon insta ...

reactjsreact-native

How to Revalidate a Next.js Dynamic Route Manually Using an API Route?

In my application built with Next.js, I have a dynamic page that displays resources at the route /resource/[id]. When a user edits a resource, such as #5, I want to refresh the cached page at /resource/5. I've created an API route in my /pages direct ...

javascriptnext.jsnext.js13

Line divider immediately following the title on the same row

I am looking to insert a separator line immediately following the H1 tag, however my attempts have been unsuccessful. Can someone provide assistance with this? <style> #sepr { border-top-width: 3 px; border-top-style: solid; ...

htmlcss

Using a CSS hack to create a border cutout

The Dilemma... I am attempting to position div elements over a border, while maintaining space on both sides of each div. Take a look at the scenario: Note the gaps surrounding the black divs. I am struggling to find a solution for this issue, aside fro ...

htmlcss

Implementing the Reactjs module CSS with multiple class selectors

When I click a button, I am trying to implement or add multiple classes to our container. However, the styling does not seem to be applied correctly. Here is the code snippet: Layout.module.css .Content { padding-left: 240px; min-height: calc(10 ...

reactjscss-modules

To enhance your React Class Component, make sure to utilize the withStyles feature when

This particular component is not set as a default export component. I am attempting to apply some styles to it but struggling to figure out how to encapsulate it in an HOC. Hence, the current issue where it does not recognize the classes variable. import ...

javascriptreactjsmaterial-ui

What methods can be employed to prevent a custom CSS from overriding my personal styles?

Issue I've created a website with unique styles that I really like. However, I want to enhance its functionality by incorporating a custom dialog box from the BootBox library. The problem is that the extensive style sheet that comes with BootBox com ...

htmlcsstwitter-bootstrapbootbox

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

javascripthtmlangularjsangularjs-ng-repeat

Adding data to a subdocument array with Mongoose's $push method

Here is the model that I am working with: var Customer = mongoose.model('Customer', { firstname : String, lastname : String, phone : String, street : String, city : String, state : String, zip : String, fixed : Bo ...

javascriptnode.jsmongodbmongoose

Prompt for confirmation in ASP.NET code-behind with conditions

I've searched around for a solution to this problem. Below is a representation of my pseudocode: bool hasData = ItemHasData(itemid); Confirm = "false"; // hidden variable if (hasData) { //Code to call confirm(message) returns "true" or "false" ...

javascriptasp.netajaxconfirm

Struggling to make the DataTables.net Bootstrap 5 example function properly

I'm currently working on familiarizing myself with the styling example for Datatables.net using Bootstrap 5, which can be found at https://datatables.net/examples/styling/bootstrap5.html. I've followed the code provided in the example closely, bu ...

javascripthtmlbootstrap-5

Numerous classifications and tags available for c3-angular-directive-c3 charts

I have a project requirement to create a stacked bar chart that should look like the image below: Currently, I am utilizing the c3-angular-directive library along with c3.js for chart creation. The challenge lies in dealing with multiple categories. The ...

javascriptangularjschartsc3.js

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

Is there a way to verify the existence of a specific error in the console?

There seems to be a conflict between a WordPress plugin or code left behind by the previous programmer, causing the WordPress admin bar to always remain visible. While no error is triggered for admins, visitors may encounter a console error. My goal is to ...

javascriptjqueryhtml

Skipping certain key-value pairs during the conversion from JSON to Excel Worksheet using the XLSX library in JavaScript

I have a set of objects in JSON format within my JavaScript code and I am looking to transform this data into an Excel worksheet. Within the JSON structure, there are certain key-value pairs that I do not wish to include in the Excel output. For instance, ...

javascriptjsonexcelxlsxworksheet

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

I have 14 objects positioned across the dom that I need to animate using the translate property. Currently, I am using transform: translate(x%, y%) for each object, requiring me to calculate the translation amount and apply a CSS style individually. This m ...

javascripthtmlcss

A centralized navigation bar featuring a logo on the left side

I am trying to create a navbar with a centered layout and a logo floated to the left side. For inspiration, check out this example: http://www.bootply.com/98314 I would like something similar to the example mentioned but instead of left-floated items, I ...

htmlcsscenternavbarnav

Updating backgroundPosition for dual background images within an HTML element using Javascript

Issue at Hand: I am currently facing a challenge with two background images positioned on the body tag; one floating left and the other right. The image on the left has a padding of 50px on the left side, while the image on the right has a padding of 50px ...

javascriptcss

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functio ...

javascripthtmlcss

Issue "RangeError: minimumFractionDigits value is invalid" when using ChartJS in a Next.js application

I'm currently working on developing an application utilizing react-chartjs-2.js. The functionality is smooth in my local environment, but when moved to production, I encounter the following error: Application error: a client-side exception has occurre ...

javascriptreactjsnext.js