I'm looking to mirror images within the Bootstrap framework - any suggestions on how to achieve this using jQuery

When hovering over the image, it should flip to reveal text or a link:

<div class="clearfix visible-xs"></div>
      <div class="col-md-3 col-sm-3 col-xs-6">
        <div class="speaker-item animated hiding" data-animation="fadeInUp" data-delay="1000">
          <div class="img-wrapper">
            <img src="assets/img/speaker/speaker-3.jpg" class="img-responsive img-circle" alt="speaker-3" />
          </div>
          <div class="name">Brad Pitt</div>
          <div class="sub">CEO of Yahoo</div>
          <p class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <div class="social-link">
            <a href="#"><span class="fa fa-facebook"></span></a>
            <a href="#"><span class="fa fa-twitter"></span></a>
            <a href="#"><span class="fa fa-google-plus"></span></a>
          </div>
        </div>
jquerycsshtmltwitter-bootstrap

Answer №1

body {
  background-color: #edebc4;
}
h1 {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
}
.flip-container {
  position: absolute;
  perspective: 1000;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.flip-container .front,
.flip-container .back {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.flip-container .flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.flip-container .flipper .front,
.flip-container .flipper .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.flip-container .flipper .front {
  z-index: 2;
  transform: rotateY(0deg);
}
.flip-container .flipper .back {
  transform: rotateY(180deg);
}
<h1>Coin flip</h1>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <img src="//lorempicsum.com/futurama/100/100/1" alt="" />
    </div>
    <div class="back">
      <img src="//lorempicsum.com/futurama/100/100/2" alt="" />
    </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

How can I send a current variable through PHP?

I have a pressing deadline and I need some guidance before moving forward. Can someone please advise if what I'm attempting is feasible or if there's a quicker solution? I encountered some problems with an accordion menu, so as a temporary fix, ...

javascriptphpjqueryhtmlcss

The API response was blocked due to the CORS header "Access-control-allow-origin."

I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...

javascriptphphtmljquerylaravel

Error message saying "Jquery/Ajax Variable is undefined"

Whenever I try clicking the button, an error pops up saying "popup is not defined." I have no clue what to do. <input href="#dialog" type='button' value='Open' onclick="popup(<?php echo $image['image_id']; ?>); retur ...

jqueryajax

Optimizing the JSON date structure

After receiving a datetime value in JSON with the format: Created "/Date(1335232596000)/" I developed a JavaScript function to display this value on the front end. Here's the code snippet: return new Date(parseInt(date.substr(6))); However, the c ...

javascriptjqueryasp.net-mvcjson

event fails to trigger on a fixed positioned element

Here's the code snippet I've been working with: if ($('body.page-service-map').length || $('body.page-contact').length) { $(document.body).append('<div class="black-overlay"></div>'); ...

cssz-index

Steps for passing a Javascript variable through POST method and then redirecting to a different page

I am facing an issue with sending a JavaScript variable via POST to a PHP page and displaying the new page. Despite checking the variable using Wireshark and confirming that it is sent correctly (key and value), the new page does not show anything. $(docu ...

javascriptphpjquery

Trouble with the display none function

I am trying to achieve the following: If my shopping cart is empty, I want another div to display over the top of it. Instead of seeing the cart, users should see a message saying 'your cart is empty'. Currently, I have set the other div to dis ...

javascriptcss

What is the best way to ensure that the content on my webpage stays below the navbar, no matter the height of the

I've been working on my homepage layout and encountered an issue with positioning the content below the navbar, which is centered on the page. Every time I adjust the window height, the content shifts. How can I ensure that it stays fixed below the na ...

htmlcssresponsive-designscreen-orientation

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...

javascripthtmlcss

The Datatable is only displaying a single record

After fetching data from a firestore collection and storing them in an array, I encountered an issue where only one entry is displayed in the datatable despite retrieving all documents from the firestore collection. What could be causing this problem? Belo ...

javascripthtmlfirebasedatatablesgoogle-cloud-firestore

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

Is there a specific Bootstrap class that allows me to hide a grid column for certain screen sizes without using media queries and the "display:none" style? ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

Learn how to use Bootstrap 4 to selectively filter through a list by their data attribute values

I am currently working with a PHP form that looks like this: <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <label class="assistive-text" for="s"> &l ...

twitter-bootstrapbootstrap-4

Bootstrap 4 Navigation Bar: Aligning dropdown menu to the right with overflow opening on the right side

Utilizing Bootstrap 4 for a simple navbar, I recently noticed that my right-aligned dropdown opens to the right, causing overflow and displaying the horizontal browser scrollbar. Here is the code for the navbar: <nav class="navbar navbar-expand-lg nav ...

htmltwitter-bootstrapbootstrap-4

Is it possible to utilize arrow functions in Vue while using style binding?

As I venture into the world of Vue JS HTML templates, I am exploring how to bind styles using arrow functions. My goal is to toggle the visibility of a div that originates from the Vuex store. Below is my current attempt at achieving this. The main_activi ...

javascripthtmlcssvue.jsvuejs2

Utilizing CSS3 Pseudo Elements for Styling a Graph

I'm struggling to achieve the desired look of my ancestor chart using an unordered list format. Initially, I borrowed code from CSS3 Family Tree, but found it to be more like an organizational chart rather than a family tree. For testing purposes, he ...

htmlcsspseudo-element

What is the best way to make an HTML form show fields depending on certain conditions?

Initially, I created an index page containing a form with various fields. The utility was built to handle all the fields, but now there's been a change in requirements. What I need is for only the Controller Type and Test Type fields to be displayed f ...

javascripthtmlcss

Fade-in effect applied to images upon exposure

Is there a way to fade in an image based on the percentage scrolled, rather than a set number of pixels? I want my website to be responsive and adjust to all screen resolutions. Or perhaps is there a method to have the image fade in when it enters the fiel ...

javascriptjqueryhtmlcssdreamweaver

What is causing the floated element to overlap the element below instead of vice versa?

div { background-color: #00FFFF; } p { width: 50px; height: 50px; border: 1px solid black; margin: 0px; } #p1 { background-color: red; float: left; } #p2 { background-color: green; } #p3 { background-color: orange; } #p4 { backgr ...

htmlcsscss-float

What is the best way to give a video a border-radius in an HTML/CSS code?

Is there a way I can apply border-radius to the <video> element? This is what my video currently looks like: (image shown here: <a href="https://i.sstatic.net/izKz0.png") I attempted styling the video tag with CSS, but the changes did ...

htmlcssvideostylingborder-radius

Anchors that need to be clicked multiple times before activating

'I recently encountered a strange bug. My CSS3 anchors/buttons, which I have been simplifying by removing properties, sometimes require multiple clicks to function. This is completely new to me and quite perplexing. The issue seems to occur randomly, ...

htmlcss