Utilizing JavaScript, create a dynamic grid gallery with Div Spin and expand functionality

I am looking to create a unique effect where a div rotates onclick to reveal a grid gallery on the rear face.

Starting this project feels overwhelming and I'm not sure where to begin.

<ul class="container-fluid text-center row" id="gallery2">
  <li class="col-12 col-sm-4 col-md-12 text-center" ><img src="/vw-front-painted.jpg" class="img-fluid rounded" width="200" height="200" id="vw"><img src="/bmw-side-paint-out.jpg" class="img-fluid rounded"width="200" height="200"><img src="/scort-front-paint-out.jpg" class="img-fluid rounded" width="200" height="200"></li>
  <li class="col-12 col-sm-4 col-md-12 text-center"><img src="/jag-paint-out.jpg" class="img-fluid rounded" width="200" height="200"><img src="/scoob-finish-front-out.jpg" class="img-fluid rounded" width="200" height="200"><img src="/vw-t4-rear-painted.jpg" class="img-fluid rounded" width="200" height="200"></li>
</ul>

This is the current HTML code that I have. My goal is to have each image expand and rotate onclick, revealing a grid gallery behind the original image. I haven't started working on any JavaScript yet, but I am using Bootstrap. The CSS has been applied elsewhere, just not in this particular section.

javascripthtmlcssbootstrap-5image-gallery

Answer №1

If you want to rotate an image, try this:

<style>
  .rotate-me { transform: rotate(90deg); }
</style>

It's worth mentioning that I'm not entirely confident if this will work on a div element or just an image. My CSS and HTML skills are decent at best.

I found inspiration for this code snippet from the helpful resources over at code-boxx

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

The height of the navigation bar adjusts to fit the image

I'm currently struggling with my html and css learning project. The height of the navigation bar is not adjusting properly to the size of the image. I have tried various solutions, but nothing seems to work. Any guidance would be appreciated! htm ...

htmlcss

Is there a way to efficiently compare multiple arrays in Typescript and Angular?

I am faced with a scenario where I have 4 separate arrays and need to identify if any item appears in more than two of the arrays. If this is the case, I must delete the duplicate items from all arrays except one based on a specific property. let arrayA = ...

javascriptangulartypescriptecmascript-6ecmascript-2016

JavaScript encounters an error when trying to create a MarkLogic instance with an array

[javascript] XDMP-CAST: (err:FORG0001) xs:string#1(.) -- Invalid cast: `json:object(<json:object xmlns:xs="http://www.w3.org/2001/XMLSchema" ` xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" .../>) cast as xs:string Stack Tr ...

javascriptentitymarklogic

Unusual Box-shadow glitch experienced exclusively when scrolling in Chrome 51

While working on my website, I encountered a peculiar issue with the box-shadow in Chrome 51. My site has a fixed header with a box-shadow, but when I scroll up or down, the box-shadow leaves behind some marks (horizontal gray lines): https://i.stack.imgu ...

htmlcssgoogle-chromebox-shadow

Can one showcase a php content using an ajax event?

I’m having trouble asking the right question because I’m not sure what I’m doing. I have a form that includes a default PHP script that creates three different lines: <form method="GET" name="NewDeliveryNote" action="ItemPosts_INSERT.php"> < ...

phpjavascriptajax

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Just started experimenting with React and ran into an issue that I can't seem to find a solution for anywhere. I have a basic search form that interacts with an API. If an invalid value is returned, it displays an H3 element with an error message lik ...

javascripthtmlreactjsforms

Receiving 'Unexpected end of input' error when using a string as a JavaScript function argument

I am trying to implement an ajax request function in my project. This is the code snippet I have: function Reject(id, scomment) { jQuery.ajax({ type: "POST", url: "reject.php", data: {id: id, Scomment: scom ...

javascriptphphtmljqueryajax

What is the best way to include multiple entries in a select2 form using ajaxform?

select2/3.5.2/ I had to repost this because my initial post was not formatting correctly. The tools in use are: A select2 form field that allows searching through multiple records A bootstrap popup modal containing a form for entering a new record if i ...

javascriptjqueryjquery-select2ajaxformjquery-select2-3

Can the arrangement of icons/buttons on the JW Player control bar be customized?

I am trying to customize the skin of my JWplayer like this: This is my current progress: I have been researching how to rearrange the order of icon / button on the controlbar. According to the jwplayer documentation, the buttons on the controlbar are div ...

javascriptcssjwplayer

Activate a function when the v-data-table in Vuetify is expanded and then collapsed

While trying to create a v-data-table, I came across some odd behavior when monitoring the expanded.sync value. The first layer's expanded.sync value seems normal, but the second layer's expanded.sync has three consecutive identical records. I w ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Intercepting HTTP responses to handle headers

I'm facing an issue where I am trying to retrieve a custom header sent from the server in my $http response interceptor. However, the only header that is accessible is the Content-type header. How can I troubleshoot this problem? Here is part of my $ ...

javascriptangularjsangular-http

Achieving success seems to be out of reach

Can you help me achieve a successful data transmission conclusion? I have tried different methods, but none seem to work. When clicking the "Send" button, the data gets sent, but instead of the message saying "Data sent successfully," I need the form to di ...

javascriptphpjquery

Navigating the component class in Angular to access the values of an observable object

When I send an object with two values - an array and a simple variable - it is received in another component using observable. From there, I access the object values directly in the HTML template file. Below is the code snippet: Home Component: // Home ...

javascriptangular

Adjust the color of text, image, and background when the cursor hovers over

Is it possible to change the color of an image on hover by applying a filter like brightness(10)? I tried this, but it whitens all the button, so now I'm not sure how to change the icon color. https://i.sstatic.net/nJL1i.gif One way to do it is: ...

javascript

obtain hyperlinks on a website

Is it possible to retrieve links from a web page without actually loading it? Essentially, I would like to allow a user to input a URL and then extract all the available links within that webpage. Do you know of any method for accomplishing this task? ...

javajavascripturlhyperlink

Passing a state object in a POST request body, only to find it arriving empty at the Express server

I'm having an issue with my React form component when making a POST request. The body of the request is showing up as {} even though I'm trying to send my State object. Within my form Component, I am passing the state information to another Reac ...

javascriptreactjsexpresspostfetch-api

`The compilation process in webpack doesn't seem to be picking up changes in files being

When I run webpack --watch and make changes to my JS files, it doesn't automatically recompile. I attempted to fix this by uninstalling webpack using npm uninstall, but the issue persists. Does anyone have any suggestions on how to resolve this? ...

javascriptwebpackfsevents

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

jqueryhtmlcss

Spinning Global Lighting and Bouncing in three.js

I am trying to create a 3D object that automatically rotates around the Y axis while still allowing users to scale and custom rotate the object with their mouse. This is what I have so far: import * as THREE from 'three'; import { GLTFLoader } f ...

javascriptthree.js

AngularJS redirection to a different state by utilizing a URL

When I need to direct a user to a specific state, typically I would use the following code: $state.go('state_name'); $state.transitionTo('state_name'); This method usually takes users to /state_name. However, there is one particular s ...

javascriptangularjsangular-ui-routerurl-routing