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>

https://i.sstatic.net/t6egN.png

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

Position navbar contents at the top of the screen

As I delve into learning Bootstrap4, I have come across the following snippet of HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

htmlcssbootstrap-4

Avoid having a pre tag enclosed long line exceed its container's width

Within the <pre> </pre> tags, I have a lengthy single line of text that needs formatting. Is there a method to automatically wrap the text or must I manually insert <br> tags within the text? ...

htmlcss

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

Experiencing a lack of information in express?

Whenever I attempt to send a POST request (using fetch) with the body containing the state of the application, I receive an empty object on the server side. What am I doing wrong here? I should be receiving the object with the properties name, username, an ...

javascriptnode.jsreactjsexpress

The CSS header remains the same size regardless of the size of the dynamic table

Is there a way to set the header in an XHTML page to be as wide as the page itself? I used width:100%, but the issue is that I have a dynamic table and when it grows bigger, the header doesn't expand. How can I solve this problem? #header{ top: 0 ...

cssxhtml

The page could not be generated due to a server error with the syntax. More specifically, an Unexpected token 'export' caused a SyntaxError

Encountering an issue while attempting to retrieve data using getServerSideProps. Seeking assistance, thank you! Server Error SyntaxError: Unexpected token 'export' This error occurred during the page generation. Any console logs will be shown ...

javascriptreactjsnext.js

Untangling REGEX URLs for Effective Filtering

I am currently working on creating a filter for a video list. I have successfully put together a string that includes all the values selected by the user for filtering. Right now, I am passing this string as a parameter through the URL. For example: NOTE ...

javascriptangularjsregexfilter

Achieve horizontal wrapping of div elements

Currently, I am developing a blog where search results for articles will be displayed within divs. The design of the website is completely horizontal, meaning that articles scroll horizontally. Creating a single line of divs is straightforward, but it&apo ...

javascripthtmlcss

What sets apart "React.useState setter" from "this.setState" when updating state?

After clicking on the button in AppFunctional, the component fails to update even though the state has changed. However, everything works fine in AppClass. In both cases, we are mutating the original state with "push", but I'm struggling to understan ...

javascriptreactjs

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

Steps to develop a collaborative NPM package

I am currently in the process of developing an NPM package using Typescript that contains solely my type interfaces. At the moment, my project has the following folder structure: project │ index.ts │ └───types │ restaurant.ts │ ...

javascriptnode.jstypescriptnpmrollup

Obtain the background color of an element using the source attribute in Selenium WebDriver

Understanding the x-path is crucial, such as < img id="" src="/A/A/B.png" style=""> My task involves identifying the color of the image, but unfortunately, the style attribute does not provide any information about color. It only includes details a ...

htmlcssselenium

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

In our Typescript-based NodeJs project utilizing Mongoose, we are seeking the right approach to define an enum field on a Mongoose schema that aligns with a Typescript enum. To illustrate, consider the following enum: enum StatusType { Approved = 1, ...

javascriptnode.jstypescriptmongodbmongoose

Ensuring Valid Submission: Utilizing Jquery for a Straightforward Form Submission with 'Alajax'

After searching for a straightforward JQuery plugin to streamline the process of submitting forms via Ajax, I stumbled upon Alajax. I found it quite useful as it seamlessly integrates into standard HTML forms and handles all the necessary tasks. However, I ...

javascriptjqueryajaxforms

Ensure that the ng-view element has a height of 100% and

Currently, I am working on developing an AngularJS app and my index page consists of a ng-view where all the content is injected using ui-router: <header> <nav class="navbar"> //content for navbar will go here </nav </hea ...

htmlcssangularjs

React - Issue with Input event handling when utilizing both onChange and onKeyDown functions

I was attempting to create a feature similar to a multi-select, where users could either choose a value from a list or enter a new value. The selected value should be added to an array when the user presses the enter key. To monitor changes in the input ...

javascriptreactjs

Calculate the total price from a combination of HTML and JavaScript options without altering the values

I'm currently facing an issue in my form where the final price needs to be updated when a different option is selected. I've searched extensively for the problem without success. I've used similar code before, just with different variables a ...

javascripthtml

Learn the effective way to customize the primary button text color in Bootstrap 4 using SCSS styling

Looking to customize the .btn-primary text color. I attempted to modify the background color in _variables.scss by adding the following line: $primary: #a1c1b6; However, I was unable to change the text color despite trying various options. // not working ...

csstwitter-bootstrapbootstrap-4sass

Extract the text enclosed by two specific symbols within a string and add it to a new array

I have a string formatted as follows: var str = "-#A This text belongs to A. Dummy Text of A. -#B This text belongs to B. Dummy Text of B. -#C This text belongs to C. Dummy text of C. -#Garbage This string should be ignored" I am looking to convert this ...

javascriptregex

Preventing event propagation in Angular when clicking

What is the best way to call an Angular function within my jQuery code? I attempted to do so with the following: $(document).on('click', '.myBtn', function(e) { angular.element($(".someClass")).scope().clearBtnItems(); e.stop ...

javascriptjqueryangularjsstoppropagation