Arranging divs precisely while rotating a Bootstrap Thumbnail

I've been experimenting with creating a "css3 on hover flip" effect for bootstrap thumbnails. It works perfectly fine on simple divs (check it out here)

Here's the main CSS3 code I'm using:

.front{
    position:absolute;
    transform:perspective(600px) rotateY(0deg);
    backface-visibility:hidden;
    transition: transform .5s linear 0s;
}
.back{
    position:absolute;
    transform:perspective(600px) rotateY(180deg);
    backface-visibility:hidden;
    transition: transform .5s linear 0s;
}
.flip3d:hover > .front{
    transform:perspective(600px) rotateY(-180deg);
}
.flip3d:hover > .back{
    transform:perspective(600px) rotateY(0deg);
}

However, when I try to apply the same technique to bootstrap thumbnails, the columns in the rows containing the thumbs end up overlapping (see example here).

<div class="row">
    <div class="item col-sm-6 col-md-4 flip3d">
        <div class="thumbnail front" id="item">
            <img src="http://placehold.it/350x250"/>
            <div class="caption">
                <span>Front1 &nbsp;</span>
                <p>Front1 Description</p>
            </div>
        </div><!-- /.thumbnail-->
        <div class="back thumbnail">
            Some Content
        </div>
    </div>
</div>

I suspect this issue arises from using absolute positioning for the .front and .back divs, which is necessary for the .front div to overlay the .back div.

Any suggestions on how to address this problem?

htmlcsstwitter-bootstrap

Answer №1

To maintain the spacing and styling provided by bootstrap when using absolute positioning, you can create a wrapper div with position:relative and then limit the size of your thumbnails within it.

(I have adjusted the col-* classes to XS in the following code snippet to ensure they display correctly at all sizes.)

.positioningDiv {
    position:relative;
}

.front{
transform:perspective(600px) rotateY(0deg);
backface-visibility:hidden;
transition: transform .5s linear 0s;
}
.back{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
transform:perspective(600px) rotateY(180deg);
backface-visibility:hidden;
transition: transform .5s linear 0s;
border:1px solid #000;
}
.flip3d:hover .front{
transform:perspective(600px) rotateY(-180deg);
}
.flip3d:hover .back{
transform:perspective(600px) rotateY(0deg);
}
.caption span{
font-size:large;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
    <div class="row" id="items_row1" >
        <div class="item col-xs-4 flip3d">
            <div class="positioningDiv">
                <div class="thumbnail front" id="item">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Front1 &nbsp;</span>
                        <p>Front1 Description</p>
                        <br>
                    </div>
                </div><!-- /.thumbnail-->
                <div class="back thumbnail">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Back1 &nbsp;</span>
                        <p>Back1 Description</p>
                        <br>
                    </div>
                </div>
            </div>
        </div>
        <div class="item col-xs-4 flip3d">
            <div class="positioningDiv">
                <div class="thumbnail front" id="item">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Front2 &nbsp;</span>
                        <p>Front2 Description</p>
                        <br>
                    </div>
                </div><!-- /.thumbnail-->
                <div class="back thumbnail">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Back2 &nbsp;</span>
                        <p>Back2 Description</p>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- / .items_row1 -->
</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

Issue with slideout menu hyperlinks malfunctioning

Currently developing a site at , everything seemed ready for deployment until testing in 320x480 mode on mobile revealed that the links on the slideout menu were not working on any mobile device I tried, regardless of resolution or page. I've tried u ...

javascriptjqueryhtmlcss

having trouble retrieving information from the input field

I'm having trouble retrieving the user's input from the input field, can someone assist me with this issue? I can't seem to identify what the problem is here. var ftemp = document.getElementById("Farenheit").value; <td> <i ...

javascripthtml

My CSS content seems to be fitting correctly, but it appears larger than anticipated. Where have I gone

I've been working on customizing my webpage for mobile phones, but I've encountered an issue. When I use the inspect tool in Chrome to make the "screen" smaller, the webpage itself appears smaller but the body element size remains unchanged, as i ...

htmlcss

How can you apply margin to an element within a column in Bootstrap 4?

Within a column, I have several span elements: <div class="container-fluid"> <div class="row"> <div class="col"> <span class="myClass">some text</span> <span class="myClass">some text</span> ...

htmlcsstwitter-bootstrapbootstrap-4

How to Fetch Information from Database and Save it as a Variable in PHP

I am trying to extract the data stored in the level column of my database and assign it to a variable with the value 0. Here is the code snippet I have written to achieve this, where I fetch the data from the database and store it in a variable named $lev ...

phphtmlmysqlcssdatabase

Need to conceal certain images in Isotope, but ensure they can easily be revealed when necessary?

I have a collection of various images on my website coded with isotope. My question is, how can I hide specific images that I don't want to display initially, but have them appear when needed? I have managed to create a "show all" list using the code ...

jqueryhtmlcss

Display each value in a foreach loop just a single time

Utilizing a foreach loop to store error messages from invalid user inputs in an array, converting it into a string, and displaying them on another page. However, although the string is successfully displayed, it appears multiple times. This snippet showca ...

phphtmlregistration

Can a border not be added to a <tr> in an HTML table using CSS for any specific reason?

I am facing an issue with the borders of a table row (tr) when applying CSS styling. The tr has a class called "underRow" which is supposed to add a border at the bottom. In my CSS, I have defined the following for the ".underRow" class: .underRow { ...

htmlcsshtml-tablebordertablerow

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

javascripthtmlcss

The CSS :active selector glutton

Within a <div> element, I have an <img>. I would like the entire div to scale down by 10% (using transform) when clicked on. While I have achieved this effect, there is one minor issue: clicking on the image itself does not trigger the scaling, ...

htmlcssinternet-explorercss-selectors

Guide on submitting a reply to Harvard's "Guess my Word" challenge using JSoup

I am currently working on developing a bot to enhance my gameplay in Harvard's intriguing "Guess my Word!" game. After some exploration, I found out about a post request feature available through Chrome's "inspect element" functionality when a pl ...

javahtmlhttpnetworkingjsoup

What is the best way to remove a selected item from an array in Vuejs when it has been clicked

I'm having trouble with my splice() method in this simple To-Do app. I want to delete a specific task by clicking a button, but the solutions I've tried from Stack Overflow aren't working for me. The items do get deleted, but only the last o ...

javascripthtmlarraysvue.jsweb

Attempting to migrate a HTML website to WordPress has proven to be a challenge as only the content is visible, with the CSS failing to load properly

I'm looking to convert an HTML site into a WordPress site while keeping the same theme intact. Even after adding 'wp_enqueue_style' to the functions.php file, the CSS file is not being recognized by WordPress. functions.php <?php f ...

htmlcsswordpress

Selenium Alert: Inaccessible Element Encounter (cookie and other pop-up)

I'm attempting to click a button using Selenium so that I can inspect the full HTML of a website. Here's the code I've written: driver = webdriver.Chrome() driver.get('https://www.quattroruote.it/listino/audi/a4-allroad') time.slee ...

pythonhtmlseleniumbeautifulsoupinspect

The Bootstrap table fails to display any data retrieved from the server

I recently attempted to implement pagination using this resource: After setting up the HTML table on my page and confirming that the server-side code is functioning properly by checking the Network tab in the F12 tools, I ran into an issue. The data retur ...

jqueryhtmltwitter-bootstrap

Is it possible to trigger a Bootstrap 5.2 Popover within an "if" statement?

As part of my input validation process, I am utilizing popovers. However, I am struggling with the syntax to make it work as intended. https://jsbin.com/sufitelodo/1/edit?html,js,output The JSBin provided serves as the foundation for this issue. I am un ...

javascripttwitter-bootstrapbootstrap-5popover

Hover over with your mouse to open and close the dropdown menu in React JS

Just starting out with React JS and encountering a small issue. I'm trying to make the menu disappear when the mouse leaves that area, so I used onMouseOut and onMouseLeave to close it. However, I noticed that having these options in place prevents th ...

javascripthtmlcssreactjsmaterial-ui

The structure becomes disrupted when the Material Ui grid is enclosed within a div container

I currently have a responsive dashboard built with Material Ui's Grid elements. One of the grid items is wrapped in a div element, causing the layout to break. Check out the playground with the div element here: https://codesandbox.io/s/basicgrid-mat ...

javascriptcssreactjsmaterial-uigrid

Guide to creating animated sections using only CSS as you scroll the webpage

I am searching for a method to add animation effects (using @keyframes, transform...) to certain elements as the user scrolls down the page. For instance: When the offset is 0: the div will have a height of 100px. When the offset is between 0 and 100: th ...

htmlcss

Transform charset X to Unicode using Java

What is the process to convert a specific charset to unicode in Java? We have discussed charsets extensively, but this particular topic has not been covered yet. I have a hex string that follows the criteria length%4==0 (e.g. \ud3faef8e). Typically, ...

javahtmlcharacter-encoding