Rotating picture panel featuring an assortment of images

I'm working on a responsive image grid and looking to create a unique design. Instead of repeating the same image in each box, I would like to implement a mask that shows the image across all boxes, similar to this:

Additionally, I want to add a flipping effect to each box so that when it flips over, it reveals a different picture exclusive to that box.

Thank you in advance for any assistance provided.

div.grid {
  font-size: 0;
  width: 95%;
  margin: 30px auto;
  font-family: sans-serif;
}

a.grid {
  font-size: 16px;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
    clip: 
}

a.grid:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a.grid {
    width: calc(25% - 6px);
  }
  
  a.grid:nth-of-type(2n) {
    margin-right: 8px;
  }
  
  a.grid:nth-of-type(4n) {
    margin-right: 0;
  }
}

a.grid:hover img {
  
}

figure {
  margin: 0;
}

img.grid {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
}

.p a {
  display: inline;
  font-size: 13px;
  margin: 0;
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 100px;
}
<div class="grid">
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
    <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
    <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
</div>

htmlcssimageanimation

Answer №1

It seems like you're attempting to achieve something along these lines:

UPDATE: Resolved the glitchy hover effect and ensured that the items maintain their square shape.

html, body{
  width:100%;
  height:100%;
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.grid{
  width:calc(60vw + 30px);
  display:inline-block;
  position:fixed;
  background-color:lightgray;
  perspective:1000px;
}
.griditem{
  display:block;
  width:20vw;
  margin:5px;
  height:20vw;
  float:left;
}
.front{
  width:100%;
  height:100%;
  background:#fff url('http://www.popsci.com/sites/popsci.com/files/styles/large_1x_/public/import/2013/images/2013/03/bluemarble_1.jpg?itok=-IIyWZZX') no-repeat;
  background-attachment:fixed;
  background-position: top left;
  background-size:cover;
  transform:rotateY(0deg);
  transition:.4s ease-in-out;
  cursor:pointer;
}
.back{
  width:100%;
  height:100%;
  transform:rotateY(180deg);
  background:#fff url('http://www.dentoncorkermarshall.com/wp-content/uploads/2013/12/Asia-Square-06.jpg?x92178') no-repeat;
  background-size:cover;
  backface-visibility:hidden;
  transition:.4s ease-in-out;
  position:absolute;
  top:0;
  z-index:2;
}
.griditem:hover .front{
  transform:rotateY(180deg);
  transition:.4s ease-in-out;
}
.griditem:hover .back{
  transform:rotateY(0deg);
  transition:.4s ease-in-out;
}
<div class="grid">
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </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

What could be the reason for the compatibility issues between CSS/SASS modules and a third-party library?

I am puzzled by the fact that my sass modules do not affect the third-party component I am using, specifically react-horizontal-scrolling-menu <ScrollMenu selected={selected} scrollToSelected={true} data={items && items.map((item: any) ...

cssreactjscss-modulesreact-css-modulessass-modules

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...

htmlcsswordpresscss-floatcustomization

Enhance your website with a dynamic navigation menu created with the power of html5

Currently in the process of designing a mobile website, I am facing a specific challenge. The homepage features menu items labeled 'a', 'b', 'c', ..., 'h'. My goal is to initially display only the first three menu it ...

htmlcssexpandable

Within the body class, text appears with a subtle shadow effect, however, the links within the body also inherit this shadow

I'm encountering a problem in my CSS: body.transparent {background-color: transparent;color:#ffffff;text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;} The text-shadow was intended to apply only to simple, non-formatted text. However, it ...

htmlcss

Error encountered in jQueryUI Autocomplete: the function 'this.source' is not defined

I have been working on incorporating a live search feature that scans through keys in a JSON obtained from a public API. To achieve this, I am utilizing Jquery UI. However, I encountered the following error and I am uncertain about how to resolve it. Un ...

javascriptjqueryhtml

Tips for exchanging divs in a mobile view using CSS

Illustrated below are three separate images depicting the status of my divs in desktop view, mobile view, and what I am aiming for in mobile view. 1. Current Status of Divs in Desktop View: HTML <div id="wrapper"> <div id="left-nav">rece ...

javascriptjqueryhtmlcss

Unable to identify the source of the additional white space appearing below the footer

Click here to access a page with two Google maps embedded. Upon scrolling to the bottom of the page, an unusual amount of whitespace is visible below the footer that is not seen on any other pages. The issue seems to be related to the presence of the two ...

css

A guide on adding specific rows together in a list

I'm working with a grid that contains various items and I want to calculate the total of the val_itemservico column only for the selected rows, not all of them. How can I achieve this functionality? When the user clicks on the "Calculate" button, I n ...

javascriptpythonhtmldjango

Utilizing HTML to hide rows within a table by comparing each row with the one that comes before it

I am in need of assistance to solve a project I am working on that involves a table structure similar to this: https://i.sstatic.net/U0AI4.png Below is the code snippet I am currently using: <table class = "table table-striped table-hover"&g ...

phphtmlcss

Ways to ensure a <div> element adjusts its height based on inner content dimensions

When using buttons in a chatbot that have text which changes based on selected options, I've encountered an issue where the text length sometimes exceeds the button's space. I'm looking for a way to make the containing div automatically adj ...

cssbootstrap-4flexboxvue-componentvuejs3

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors

On a medium-sized screen, a collapsible button unexpectedly appears amidst the various links

Can anyone help me with sorting out the order of navbar elements? I'm facing an issue where on small screens, the collapse button appears above the links, but on medium screens, it shows up before the last link in the menu. Any suggestions on how to f ...

htmltwitter-bootstrapnavbarbootstrap-5

The versatility of Node.js' hbs module as an engine

Recently diving into the world of node js, I stumbled upon the hbs module. In this code snippet below: app.set('view engine', 'html'); app.engine('html', require('hbs').__express); I'm curious to know more abo ...

htmlnode.jsexpressviewengine

Enhancing Next.js with custom CSS for React-Bootstrap components: A step-by-step guide

After installing the react-bootstrap module using the pm command and importing it into my _app.js file, I encountered an issue when trying to modify the Bootstrap code for my navbar component. The code snippet provided below showcases the navbar component: ...

cssreactjsnext.jsreact-bootstrap

experimenting with adding fresh choices to dropdown menu using ajax and jquery

When attempting to load a list of locations through ajax/jQuery, I encounter an issue. After typing a letter into the input field, the first response is displayed but subsequent responses are simply appended to it. I have tried using .html('') an ...

javascriptjqueryhtmlajaxhtml-select

How can AngularJS handle sorting based on the start date and end date?

Is there a way to filter the items by Start and End Date, based on the invoice_date, using the date range functionality in a meanjs app? I am facing an issue where the date filter functions work perfectly in Plunker and my localHost production environm ...

htmlangularjsmeanjs

CSS declarations that have not been acknowledged or acknowledged

While working on a client's stylesheet today, I came across the following code: p { -webkit-hyphens: auto; -webkit-hyphenate-character: "\2010"; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; -moz-hyphens: manual; orphans: ...

htmlcss

Having trouble with the function not running properly in HTML?

I'm having trouble implementing a copy button on my HTML page. Despite no errors showing in the chrome console, the text just won't copy. Below is a snippet of my HTML code: <!doctype html> <div class="ipDiv tk-saffran"> <div c ...

javascripthtmlcopy

Pushing down menu items in a dropdown CSS navigation bar

I have a vertical navigation menu with parent and non-parent items. I want the parent items to display their child pages when hovered over, while also pushing down the items above them. HTML: <nav class="main"> <ul> <li> ...

htmlcss

The Layout of Bootstrap4 Form is Displaying Incorrectly

I'm attempting to create a basic email form similar to the one shown in the Bootstrap 4 documentation. However, I am facing an issue where the formatting is not displaying correctly. Here is what the example should look like: https://i.sstatic.net/qx ...

htmlcssvue.jsbootstrap-4bootstrap-modal