What is the best way to achieve a 3D tile layout with a zoom effect when hovering over them in a row

Trying to arrange 3D tiles in a row with zoom effect on hover and responsiveness is the ultimate goal. The desired look and feel can be seen below,

https://i.sstatic.net/yZVrm.jpg

Currently utilizing Bootstrap 3 and WordPress. Seeking guidance on how to achieve this design.

<!-- begin snippet: js hide: false console: true babel: false -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <!------ Include the above in your HEAD tag ---------->
    <div class="container">
            <div class ="row">
                <img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg">
                <img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13">
                <img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg">
                <img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13">
                <img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg">
               
                
            </div>

        
        </div>
    <div class="container">
    <hr>
      <div class="row">
      
        <div class="
        img-hover" style="float:left">
        
          <img class="img-responsive img-rounded" src="http://placehold.it/300">
          
                <img class="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13">
          <img class="img-responsive img-rounded" src="http://placehold.it/300">

        
        </div>
      
      </div>
      
    </div>

Both attempted methods have been included without success. Assistance is needed to accomplish this task.

jqueryhtmlcsswordpresstwitter-bootstrap-3

Answer №1

Certainly, I entrust RWD support to your capable hands ;)

.container {
  border: 1px solid red;
}

ul {
  margin: 30px auto;
}

ul li {
  vertical-align: middle;
  margin: 0 -27px;
  position: relative;
}

ul li:hover {
  z-index: 5;
}

ul li img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transition: all 400ms ease;
  cursor: pointer;
}

ul li img:hover {
  max-width: 193px !important;
  box-shadow: 5px 5px 25px #000;
}

ul li:nth-child(1) img {
  max-width: 153px;
  z-index: 1;
}

ul li:nth-child(2) img {
  max-width: 173px;
  z-index: 2;
}

ul li:nth-child(3) img {
  max-width: 193px;
  z-index: 3;
}

ul li:nth-child(4) img {
  max-width: 173px;
  z-index: 2;
}

ul li:nth-child(5) img {
  max-width: 153px;
  z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <ul class="list-inline">
      <li class="list-inline-item"><img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg"></li>
      <li class="list-inline-item"><img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13"></li>
      <li class="list-inline-item"><img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg"></li>
      <li class="list-inline-item"><img src="https://khms0.googleapis.com/kh?v=852&hl=en-US&x=2358&y=3247&z=13"></li>
      <li class="list-inline-item"><img src="https://img.fireden.net/co/image/1484/60/1484607166775.jpg"></li>
    </ul>
  </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 is the best way to contain the CSS for dynamically generated HTML within a div element without impacting other elements on the page?

I am currently facing a challenge where users can input any HTML into a text box, and I need to manipulate that HTML by identifying elements such as anchor tags or divs. To achieve this, I have created a hidden div and copied the pasted HTML into it using ...

javascriptjqueryhtmlcss

What are the steps to retrieve the JSON response from Rally REST API using either JSONP or an HTTP Proxy?

Greetings fellow Stackoverflow members! This is my initial post on this platform, after years of being a regular visitor. Our in-house defect tracking application relies on ASP. Currently, we follow a manual process to transfer all necessary Rally User st ...

jqueryajaxapijsonprally

The SVG path is not aligned properly with the container's viewbox dimensions

Recently, I came across an icon provided by a plugin I am using called calendar. However, I wanted to enhance my icons set with a new addition - the twitter icon. svg { display: inline-block; height: 16px; width: 16px; margin: 2px 0; ...

htmlcsssvg

step-by-step guide on transferring the text content of an HTML paragraph element to another HTML paragraph element through JavaScript in ASP.NET

I'm looking for help with passing the text value from one HTML paragraph element to another when a JavaScript function is called. The function loads a div element with an enlarged image and a paragraph content. Below is the code I am using: JavaScrip ...

javascripthtmlasp.net

Dropping down with Twitter Bootstrap's navbar menu

I’m currently facing some challenges with getting the Twitter Bootstrap drop-down navbar feature to function properly. Despite going through various tutorials, I am unable to make it work by directly copying the code. The console displays the following e ...

javascriptcsstwitter-bootstrap

Tips on adding to Jquery html code while maintaining the current CSS styling

My JavaScript function looks like this: function appendAllQna(qnaList, num){ for (var i in qnaList){ var qnaCom = ""; qnaCom += "<div class='scomment scommentLine'>"; if(qnaList[i].sellerYn == "Y"){ ...

javascriptjqueryhtmljspappend

What is the best way to submit data from a web form to my node.js server running in a Docker Desktop Kubernetes environment?

Looking for help with my Kubernetes yaml file. It's structured like this: apiVersion: v1 kind: Service metadata: name: my-node-app-service spec: selector: app: my-node-app ports: - name: http port: 3000 targetPort: 3000 typ ...

htmlnode.jsdockerkubernetespost

Conceal a specific element (such as a button) using the visibility property

Trying to hide a button without affecting the spacing between buttons. $(document).ready(function(){ $('#hide').click(function(){$('#btn').css('display','none');}); $('#show').click(function(){$(&a ...

jquerycssvisibility

One page experiences issues loading CSS due to MIME type, while a different page has no problem with it

I'm facing an issue with my express app that renders Mustache templates. The problem is related to the CSS not applying on one of the routes due to it being of MIME type text/html (as mentioned in the Chrome console). This is how I set up my express ...

cssnode.jsexpressmustache

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

I'm attempting to create a checkbox that, when selected, should also select everything else. I followed the code example provided in this tutorial for angular 2. However, I encountered an error: "ERROR TypeError: Cannot set property 'IS_CHECK&ap ...

htmlangulartypescript

Unable to load the CSS file

Having trouble with the folder structure in my content directory: -Content --jquery-ui-1.10.4.custom --------------------------css --------------------------smoothness ------------------------------------jquery-ui-1.10.4.custom.css ----------------------- ...

jquerycssasp.net-mvc-4

What is the best way to include a component within a content-editable div in Vue.js?

Looking for the correct way to add a div inside a content-editable div on a click of a button in vue js. Here's the code I have been experimenting with: var ComponentClass = Vue.extend(AddTag) var instance = new ComponentClass({ propsData: { type: ...

javascripthtmlvue.jsappendcontenteditable

Issue with displaying Bootstrap 3 modal on Mozilla browser

Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code: <button type="b ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Displaying the tag, while transmitting the identification in jQuery

Currently, I am working on implementing an AJAX autocomplete feature. The concept involves dynamically rendering an HTML page next to the input box based on the search terms entered. When it comes to the HTML part, I'll be using Rails with :layout ...

jqueryruby-on-railsajax

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...

javascriptjqueryhtml

IE9: Enforce the browser and document modes of IE9

Currently in IE9, my webpage is rendering with the Browser Mode set to 'IE9 Compat View' and Document Mode as 'IE standards', causing issues with all canvas elements on the page. I have already ensured that I have included '' ...

htmlinternet-explorer-9

Styling the scrollbar with a left margin in CSS

I have a setup where there is a flexbox with three columns, each of which can be scrollable depending on their content. Here is the Codepen link for reference: https://codepen.io/michaelkonstreu/pen/GRmzeJy My goal is to add a small margin left between t ...

css

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover

The printout of the webpage is not aligning properly on an A4 page

Currently, I have been utilizing the JavaScript function window.print() to print a webpage that contains a header and footer. The height of this webpage is dynamic, as it is dependent on the content of an HTML table within the page. However, I have encou ...

javascripthtmlcssprinting

The validation of class names in jQuery is not functioning correctly for text fields that are dynamically

I am currently experiencing an issue with jQuery Validation in regards to validating dynamically generated text fields through AJAX... Highlighted below is a snippet of the HTML code: <form name="booking" id="booking" method="post" action=""& ...

phpjqueryajaxjquery-validate