What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered?

The HTML code is included below, along with the corresponding JS and CSS code.

body {
  background-color: var(--primary-color);
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.overview {
  background-color: white;
  padding: 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  transform: translateY(101%);
}

.movie:hover .overview {
  transform: rotateY(180deg);
  transition: transform 0.3s ease-in;
  overflow-y: auto;
}
<img href="#" src="https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg">
<div class="movie-info">
    <h3>Title</h3>
</div>
<div class="overview">
    <h3>Overview</h3>
        lorem ipsum
    <br/>
</div>

javascripthtmlcss

Answer №1

.card {
  position: reletive;
  height: 400px;
  width: 250px;
  font-size: 32px;
  text-align: center;
}

.card__side--back {
  height: 400px;
  width: 250px;
/*   background-color: orange; */
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  background-color: orange;
  transform: rotateY(180deg);
}

.card__side--front {
  height: 400px;
  width: 250px;
/*   background-color: orange; */
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  background-color: teal;
}

.card:hover .card__side--front {
  transform: rotateY(-180deg);
}

.card:hover .card__side--back {
  transform: rotateY(0);
}
<div class="card"> 
  <div class="card__side"> 
  <div class="card__side--front">This is the front </div>
    <div class="card__side--back"> This is the back</div>
</div>
</div>

From what I gather, this design aims to utilize backface-visibility and hovering effects on a card container holding both front and back elements. The key lies in concealing the back face until hovered over due to its hidden visibility property.

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

What could be causing the lack of changes when trying to use justify content within the parent div?

I've been delving into CSS and trying to utilize justify-content in flex to center my content, but unfortunately, it's not cooperating. Here is the code I'm working with: .top-container{ display: flex; flex-flow: row nowrap; ma ...

htmlcssflexboxcontainersdisplay

Concealed Separator for Text Elements in HTML

I am in search of a method to distinguish certain specific strings within HTML code. Although I can recognize the desired strings, they may also appear as part of longer strings throughout the document. In order to locate them, I currently insert a special ...

htmlnon-printing-characters

What is the best approach to displaying child nodes in JsTree when they are only generated after the parent node is expanded?

Dealing with multiple children nodes under a parent can be tricky. For instance, when trying to open a specific node using $("#jstree").jstree("open_node", $('#node_27'));, you may encounter an issue where the parent node is not initially open, c ...

javascriptjstree

Having trouble adjusting the height of <a> elements in the navbar

My navbar has an issue where the listed items do not fill the entire height of the navbar. I have tried adjusting padding and margin, but it doesn't seem to be affecting the layout. Any suggestions would be greatly appreciated. Thank you. #navbar { ...

htmlcss

JavaScript Promise Handling: using fetch method to retrieve and extract the PromiseValue

I am currently struggling to access the [[PromiseValue]] of a Promise. However, my function is returning a Promise instead and what I really want myFunction to return is the value stored in [[PromiseValue]] of the promised returned. The current situation ...

javascriptreactjspromisefetchrequest-promise

What is the best way to clear the content of a contenteditable element in React?

I have a scenario where I am rendering an array of items, each with a contenteditable field. MainComponent.js import { useState } from "react"; import Item from "./Item"; import "./styles.css"; export default function MainC ...

javascripthtmlreactjs

guide on adding a variable to the link_to path

In my attempt to incorporate a variable into the link_to function below: <%= link_to '<button type = "button">Players</button>' .html_safe, live_players_path(:Team => @tmf) %> Whenever I click on this link, it seems to ...

javascriptjqueryruby-on-railsajax

Refresh the page once the function has been executed

Recently, I came across a basic javascript code that I need some help with. I want to reload the page after certain elements have faded out and back in. The problem is, I'm not sure where exactly I should include the window.location.reload(); function ...

javascriptjquery

Tips for adjusting the width of a field within an existing OpenERP7 form view utilizing percentages instead of pixels

In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...

cssxmlviewodooopenerp-7

Exploring test suite pathways while utilizing ArcGIS JSAPI as an alternative loader within the Intern framework

I have been developing an application using the ArcGIS Javascript API and incorporating tests with Intern. While working on Windows 7 under IIS, I encountered some challenges but managed to overcome them by following the Intern tutorial and referring to so ...

javascriptunit-testingdojoarcgisintern

Why are my API routes being triggered during the build process of my NextJS project?

My project includes an API route that fetches data from my DataBase. This particular API route is triggered by a CRON job set up in Vercel. After each build of the project, new data gets added to the database. I suspect this might be due to NextJS pre-exe ...

javascriptnext.jsnext.js13nextjs-dynamic-routing

Using jQuery AJAX to preload GIF images for CSS background-image loading

For some time, I have been utilizing jQuery AJAX to preload GIF images with the following code: $("#images").html("<img id='loader' src='../img/ajax-loader.gif' />"); Now, I am attempting to achieve a similar effect (such as a s ...

jqueryajaximagepreloadercss

Instructions on uploading a PDF file from a Wordpress page and ensuring the file is stored in the wp-content upload directory folder

What is the process for uploading a PDF file on a WordPress page? <form action="" method="POST"> <input type="file" name="file-upload" id="file-upload" /> <?php $attachment_id = media_handle_upload('file-upload', $post->I ...

javascriptphphtmlcsswordpress

What is the minimum size a string must be in order to cause the innerHTML render to be disrupted?

Can anyone tell me what the byte limit is for interrupting the rendering of an innerHTML of a DOM element when using innerHTML = $string or .append()? Is it 1MB, 5MB, 10MB? Does it vary by browser? How can I determine this limit? EDIT (11/11/11): I con ...

htmlajaxinnerhtml

VueJS is unable to access an array

Unable to access an array in Vue.js. console.log(this.ref_number_response[0]); When I try to access the array, it shows undefined. I'm puzzled by this... data(){ return{ ref_number_response: [], } }, methods:{ che ...

javascriptvue.js

What is the easiest way to clear browser cache automatically?

Hello, I have implemented an ajax auto complete function in one of my forms. However, I am facing an issue where over time, the suggestions get stored and the browser's suggestion list appears instead of the ajax auto complete list, making it difficul ...

phpjavascriptajax

What is the process for specifying the content type as application/json in an Ajax request?

Do you have a smart contract named GovtContract that functions properly when utilizing curl commands? $curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq $curl -X GET -H ...

jqueryhtmljsonnode.jsajax

I am looking to consolidate my array of objects into a single object with distinct keys

Hey there! I'm looking to showcase the expenses for each category throughout the months of the year. Here's an example: {Month: "January", Food: 610, foodColor: "#063951", Others: 121, othersColor: "#C13018", …} Fo ...

javascriptarraysreactjsnivo-react

Give Jquery a quick breather

My goal is to have my program pause for 3 seconds before continuing with the rest of the code. I've been researching online, but all I can find are methods that delay specific lines of code, which is not what I need. What I would like to achieve look ...

javascriptjquerysleepbreakpause

Having an iframe at the bottom of the page is causing unnecessary white space below the

I currently have an iframe placed in the footer of my website. When I try to set the height of the iframe to match the height of the footer, it results in unwanted white space appearing below the iframe. The issue can be seen here: JSFiddle To fix this p ...

htmlcssiframe