Rotating pictures using CSS

I have a set of images that I need to flip. The idea is to display numbers on the front and pictures on the back. When a user clicks on an image and it matches another, they both disappear after a few seconds. Currently, I am struggling with getting the images to flip. Below is my HTML code and CSS:

I attempted to use a hover effect for flipping but it did not work:

 #flipper:hover {
            transform: rotateY(180deg);
        }

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

body {
  color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

h2 {
  text-align: center;
}

body {
  background-color: white;
}

img {
  width: 30%;
  float: left;
  margin: 1.66%;
}

p {
  margin-left: 1.66%;
  font-family: "Contrail One", cursive;
  font-size: 35px;
  text-transform: uppercase;
  border-bottom: 2px solid black;
  width: 30%;
  padding-bottom: 20px;
}

div.a {
  text-align: center;
  font-family: sans-serif;
}

#flipper:hover {
  transform: rotateY(180deg);
}
<link href="https://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet">


<div id="flipper">

  <img class="flip" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">
  <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">

  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">

  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">

  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">
  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">

</div>

csshtml

Answer №1

Initially, it seems like you may not have connected your CSS to your HTML file as I see only one link and it appears to be for a Google font.

Here's a sample code snippet for you to refer to: https://codepen.io/robert9111/pen/MzabWZ

<!-- HTML -->
<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">
      <img class="size" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg/">
    </div>
    <div class="back face center">
      <p>This is great for providing additional information about an image.</p>
      <p>You can add any content here.</p>
    </div>
  </div>
</div>
<!-- CSS -->
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}

.size {
width: 450px;
height: 281px;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 6px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align:center;
background-color:#aaa;
}

You can take a look at this code to potentially address the issue you're facing.

I haven't included everything so that you can try writing some of the code yourself. This way, you'll gain a better understanding.

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

Tips for displaying scrollbar on the side panel

Looking to create a view ads page but struggling with Bootstrap? Need help incorporating a scrollbar in the filters for easier browsing of content? The goal is to keep the filter fixed while users scroll through ads in the main section. <head> <li ...

htmlcssbootstrap-5

Mastering CSS States: Hover and Active

Imagine we have a link with the class "myClass1". Using JavaScript, we are able to manipulate the classes for this link - for instance, adding "myClass2" to it. My query is whether we can also manage states through JavaScript, such as removing the hover s ...

javascripthtmlcssipadmobile-safari

What is the best way to display a Country's information from the dropdown menu in the Local Weather application?

I have been working on a Local Weather app that includes a dropdown menu where users can click on a location to view information such as City, Country, and temperature. However, I encountered an issue where the information does not appear consistently ever ...

javascriptjqueryhtmlcssdrop-down-menu

Insert the content from the th element into a custom data attribute within the corresponding td cell in that specific column

To achieve dynamic content insertion, the text within each <th> tag must be stored in a variable and assigned to the data-th attribute of the respective <td> element. This assignment should follow the order of appearance in the table structure. ...

javascriptjqueryhtml

Issues arising from JavaScript/jQuery dysfunction

I've successfully implemented this code in jsfiddle, but I'm struggling to make it work on my local files like index.html, index.css, index.js. Can someone please guide me on how to achieve this locally and not just on jsfiddle? Here's the j ...

javascriptjqueryhtmlcss

Finding the index of a table cell's column is a simple task that can be

Is there a way to retrieve the column index of an HTML table element using jQuery? Below is my HTML code snippet: table { border:1px solid navy; width: 70%; text-align: center; } table th { text-align: center; width:100px; height:20px; } table td { widt ...

jqueryhtml

Engaging with JSON data inputs

Need help! I'm attempting to fetch JSON data using AJAX and load it into a select control. However, the process seems to get stuck at "Downloading the recipes....". Any insights on what might be causing this issue? (Tried a few fixes but nothing has w ...

javascripthtmljson

Implementing ExtJS - Populating information into the central area using border layout

As a newcomer to ExtJS, I've been experimenting with the border layout feature. However, I'm facing an issue when trying to load Ext components into the center region. Within a viewport setup: new Ext.Viewport({ layout: 'border', ...

javahtmlextjs

Tips for concealing certain elements on a webpage using CSS

Recently acquired this new template Struggling to figure out how to modify these elements using CSS https://i.sstatic.net/KBMOS.png This template features a 4 column portfolio page. Your assistance would be greatly valued. Thank you ...

csswordpressportfolio

To include a slash or not before the assets path in HTML - that is the question

Should the use of / in front of paths in HTML pages be considered a good practice? If using / for paths, is it necessary to configure a <base url=""> in the page? An issue arises with a generated CSS file that includes the following: background-ima ...

htmlpathrelative-path

Adjust the size of the text within the div element as needed

Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, w ...

javascriptjqueryhtmlcss

Using select and options with the AIRA input fields names incorrectly

Hello, I'm struggling with how to effectively manage this fields in order to resolve the issue of "ARIA input fields do not have accessible names." Whenever I test the website, it brings up this particular issue. Any advice on how to tackle this? < ...

phphtmllaravel

Create a JSON list by preserving input values together in a PHP form

Currently, I have a JSON list containing conditions (items) and an associated color for each condition. My goal is to construct a form that allows me to update the conditions and then convert them back to JSON format. For instance: <?php ?> $JSO ...

phphtmljsonforms

The text for the Django link is too verbose

When working on my Django app, I encountered an issue in the detail view where links to attached files in a Post are displayed. The problem arises when the link is too long and extends beyond the border. Is there a way to only show a portion of the link if ...

htmldjangohyperlink

Animation unveiling of text slides

I have been working on designing a unique button for my personal diet app project that involves a sliding text effect when the mouse hovers over it. I'm almost there, but I've encountered a major issue that seems impossible to solve. I want the s ...

htmlcsstwitter-bootstrap

Trouble with executing jQuery $.ajax post to PHP within the same file

Here is the code snippet: <script> $( document ).ready(function() { $( ".button" ).click(function() { var clickBtnValue = $(this).val(); $.ajax({ //url: '', // url is empty because I'm working in the ...

phpjqueryhtmlajax

The vertical position of an element using jQuery's position() method varies between Chrome and Firefox

Whenever I execute the code in the provided fiddle on Chrome and Opera, the position().top is shown as 0. However, Firefox displays it as 1 and IE shows 0.5. Is there a way to resolve this inconsistency? http://jsfiddle.net/scottieslg/Loefza24/2/ HTML: ...

jquerycss

The data from the AJAX response is not appearing on the HTML table within the modal using jQuery

I have a link that, when clicked, opens the modal and calls the ajax method. The modal opens and the ajax method retrieves the response data successfully, but the data is not displayed within the table on my modal. I have tried multiple approaches, but non ...

javascriptjqueryhtmlajax

Creating a dynamic and engaging full-width carousel slider using Bootstrap

I am currently utilizing the Mobirise Website Builder and am in the process of figuring out how to create a full-width Bootstrap carousel similar to the example shown at this link: My goal is to have the carousel at the top of the screen, covering only 50 ...

htmlcssbootstrap-4slidercarousel

PHP Form Submission: A Simple Guide

One scenario that I'm facing is using the submit button event to populate a field in my form with a value. However, now I'm having trouble getting the form to submit at the same time. Any suggestions on what I can do? Check out this link for mor ...

phpjqueryhtmljson