Ways to ensure the active :hover element is positioned above all other elements within a class uniform in style

I'm attempting to design a basic bookshelf using only CSS and HTML. However, I'm finding it challenging to have the book currently being hovered over appear with the highest z-index.

Is this achievable without JavaScript? Maybe through some clever utilization of CSS selectors?

JSFiddle

HTML

<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      1
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 1
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      2
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 2
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      3
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 3
    </div>
  </div>
</div>

CSS

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
}
htmlcsscss-selectorshover

Answer №1

Make sure to include the z-index property within the .book:hover selector.

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
  z-index: 1; /* Added z-index property here */
}
<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      1
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 1
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      2
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 2
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      3
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 3
    </div>
  </div>
</div>

Answer №2

Perhaps you could try something along these lines? Let me know

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(0deg) rotateY(-100deg) rotateZ(-360deg) translateY(0px) translateX(5px);
  z-index:2;
}
<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      1
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 1
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      2
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 2
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      3
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 3
    </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

Tips for using CSS to adjust the width of a parent element based on the width of an image

I'm currently working on developing my own lightbox using React, and I am looking to adjust the width of a div with the class .lightbox-active based on the width of the image it contains. Right now, I have set the parent element to have a max-width: 5 ...

htmlcssreactjs

Using JSON to serialize form data before sending it in HTML

I am in the process of developing a system that requires redirecting a user to a C# application using a form that POSTs data as a serialized JSON string along with the user. The form would be structured like this: <form action="c#methodLocation" metho ...

c#phphtmljsonforms

The margin-left property is not functioning properly on the second <td> element

Displaying a table with two cells positioned next to each other: <table> <td disabled>Content for the first cell</td> <td style="margin-left:100px;" disabled>Content for the second cell</td> </table> Despite us ...

htmlcsshtml-table

Place elements in an absolute position without being affected by the parent element's borders

Typically, when attempting to position an element absolutely in the top left corner of a parent container, it will be done relative to the border width. You can refer to this example in the fiddle link provided: http://jsfiddle.net/t52Pp/1/: <div> ...

csspositionabsolute

Utilize Java to launch the HTML file in a web browser

I have a specialized need for my HTML files to be displayed on a platform that is browser-free. The solution that immediately comes to mind for me in this scenario is utilizing applet. Therefore, I am interested in having my HTML file (including CSS and JS ...

javahtmlcssswingapplet

Create a stylish card layout using Bootstrap featuring a 3D icon design

I am currently working on accomplishing this layout using Bootstrap 4 along with some custom CSS styles. https://i.sstatic.net/t3tot.png This is the code I have implemented so far: <div class="container"> <div class="row"> ...

htmlcssbootstrap-4

What is the best approach for managing the popstate event when the URL no longer exists?

When working with html5 popstate, I have two specific goals in mind. Instead of relying on plugins, I am utilizing these two methods: Push State: function contentLoaded(...) { ... window.history.pushState({ pageUrl: url }, url, url); ... } Po ...

htmlpushstatepopstate

Leverage the Width of a Nested Row within Foundation Framework

Here's a different layout option with a sidebar <div class="row"> <div class="main-content columns small-6> {main content} </div> <div class="columns small-6> {sidebar} </div> </div> And here is a ...

csszurb-foundation

What is the best way to combine XHTML files in Java while handling any potential CSS conflicts that may arise

Looking for a way to concatenate XHTML files in Java and resolve CSS collisions at runtime? The challenge is to merge files with different style definitions without losing any content. JSoup seems promising but falls short on managing style conflicts autom ...

javacsshtmlxhtmlconcatenation

Here's a way to programmatically append the same icon to multiple li elements generated using document.createElement:

I am new to creating a to-do app and need some guidance. When a user enters a task, I successfully create a list item for that task. However, I am unsure how to add a delete icon next to the newly created li element. Can someone please help me out? Below ...

javascripthtmlcss

The CSS Accordion seems to be the culprit behind the missing margin or border at the top of my page

Although everything on the page is functioning as desired, there seems to be a missing margin or border that is not causing much trouble. If there is a simple solution or an easy way to identify why this is happening, it would be greatly appreciated. Take ...

cssborderaccordionmargin

Display the div when scrolling downwards beyond 800px

Is there a way to display a hidden section when scrolling down the page, specifically after reaching a point 800px from the top? I currently have an example code that may need some modifications to achieve this desired effect. UPDATE: [Additionally, when ...

jqueryhtmlcss

Examining pseudo-elements on Internet Explorer

Recently, I encountered an issue with a pseudo-element: input[type=radio].selected::before Surprisingly, in Internet Explorer, the pseudo-element wasn't visible at all. This prompted me to investigate further. Upon inspecting the selector (imagi ...

css

Display advertisement in full screen on mobile devices with no need for scrolling bars

I am looking to develop a webpage using HTML/CSS/Javascript that can display an advertisement in full screen on mobile devices like smartphones and tablets. The ad should expand to the maximum width and height of the screen without any scrollbars. I have ...

javascripthtmlcssmobile

The correct functioning of CSS hyperlinks is currently experiencing issues

The links in the "request" division are not displaying properly. The style.css file contains the following code for the links in this division: .header .request a span{border-bottom:1px dotted}.header .request a:hover span{border-bottom:0} Example: berdy ...

htmlcsshyperlinkhref

How to Change Background Color to Black for a PNG Image Using CSS in Ionic

When applying CSS in Ionic, I encountered an issue with the background image causing the background to turn black. Without the image, everything looks fine. ion-content { --background: url("/assets/product_background.png") 0 0/100% 95% no-re ...

htmlcssionic-frameworksassionic4

Can a single value be stored in a table using a radio button?

I have created an HTML table that is dynamically generated from a database. I am using a for loop to populate the table. However, I am facing an issue where each radio button in the table holds only one value. What I actually want is for each row to have ...

javascripthtml

What is the best method to display PHP POST data with AJAX without using jQuery?

Essentially, I have this HTML code: <form method="post" id="myform" onsubmit="getData()"> <fieldset> <legend>Form</legend> <label>Color: <input type='text' id="color" name='color'></label> < ...

javascriptphpjqueryhtmlajax

Image displayed in tooltip when hovering over

I have been experimenting with displaying an image in a tooltip when hovering over it. I came across a fantastic solution that suits my needs: Codepen CSS: @import "compass"; * { box-sizing: border-box; } .tooltip { position: relative; border-bo ...

jqueryhtmlcsstooltipmousehover

Position the site at the center of the screen for perfect alignment

As I work on building a website, I am striving to achieve perfect center alignment both horizontally and vertically on the screen. However, despite my efforts, I have only managed to center it horizontally so far. After thorough research, the solutions I ...

htmlcsscentering