struggling to perfect the CSS styling

I am in need of a design similar to the image linked below: https://i.sstatic.net/Er1wT.png

I attempted to create this layout using a table, but I have not been successful in aligning the side images properly.

testTable.html

<style>
.container{
    width: 100%;
    height: 400px;
}

.left-image, .right-image{
    width: 10%;
    overflow: hidden;
}

.center-image{
    width: 80%;

}

</style>

<table class="container">
    <tr>
        <td class="left-image">
            <img src="img1.png" alt="Snow" style="width:100%">
        </td>
        <td class="center-image">
            <img src="img2.jpg" alt="Snow" style="width:100%">
        </td>
        <td class="right-image">
            <img src="img3.png" alt="Snow" style="width:100%">
        </td>
    </tr>
</table>

The look I want:

My goal is to have the center image stand out while the left and right images appear blurred, giving the impression that they are behind the central image.

htmlcss

Answer №1

Give this code a shot, but remember to incorporate jQuery for slide functionality. See a live example here. If you encounter any issues with blurry images, feel free to reach out via email [email protected] :)

<div class="slider-wrapper">
  <div class="slider-btns">
     <button class="slider-btn btn-1 active"></button>
     <button class="slider-btn btn-2"></button>
     <button class="slider-btn btn-3"></button>
   </div>
  <div class="slider">
    <div class="slide">
      <img class="slide-img" src="your-1st-image.src">
      <!-- This is not necessary --><p>Slide 1</p>
    </div>
    <div class="slide">
      <img class="slide-img" src="your-2nd-image.src">
      <!-- This is not necessary --><p>Slide 2</p>
    </div>
    <div class="slide">
      <img class="slide-img" src="your-3rd-image.src">
      <!-- This is not necessary --><p>Slide 3</p>
    </div>
  </div>
</div>;

<style>
*{
  margin: 0; padding: 0;
}
.slider-wrapper{
  overflow: hidden;
  position: relative;
  width: 100%; height: 300px; /* You can choose your own width and height */
  background: grey; /* This is not necessary */
}
.slider-wrapper > .slider{
  position: relative;
  width: 300%; height: 100%;
  left: 0%;
  transition: 1s;
}
.slider-wrapper > .slider-btns{
  z-index: 999;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 90%;
}
.slider-wrapper > .slider-btns > button.active{
  width: 20px; height: 20px;
  border-radius: 50px;
  border: none;
}
.slider-wrapper > .slider-btns > .slider-btn{
  width: 15px; height: 15px;
  border-radius: 50px;
  border: none;
}
.slider-wrapper > .slider > .slide{
  text-align: center; /* This is not necessary */
  float: left;
  margin: 0 20px;
  width: calc((70% / 3) - 40px); height: 100%;
  background: purple; /* This is not necessary */
}
.slider-wrapper > .slider > .slide > .slide-img{
  width: 100%; height: auto;
  display: none; /* When you use this code delete this line */
}

p{
  font-family: Arial; font-size: 40px;
  line-height: 300px;
} /* This style is not necessary */
</style>

Answer №2

I may not have fully grasped your query, but I made an effort to comprehend and provide a response.

<table class="content-container">
    <tr>
        <td class="left-section">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
        </td>
        <td class="middle-section">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
        </td>
        <td class="right-section">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
        </td>
    </tr>
</table>

Below is the accompanying CSS

.content-container{
    width: 100%;
    height: 400px;
}

.left-section, .right-section{
    width: 33.33%;
    overflow: hidden;
}

.middle-section{
    width: 33.33%;

}

Displayed are the outcome and Fiddle link

https://i.sstatic.net/UZtae.png

https://jsfiddle.net/u97oewqy/

Answer №3

Perhaps this code snippet will be useful for you.

Try using border-collapse: collapse; in the .container class and set the padding: 0; for images.

<style>
.container{
    width: 100%;
    height: 200px;
    border-collapse: collapse;
}

.left-image, .right-image, .center-image {
  padding: 0
}

.left-image, .right-image{
    width: 10%;
    overflow: hidden;
}

.center-image{
    width: 80%;
}

</style>

<table class="container">
    <tr>
        <td class="left-image">
            <img src="https://example.com/image1.jpg" alt="Image 1" style="width:100%">
        </td>
        <td class="center-image">
            <img src="https://example.com/image2.jpg" alt="Image 2" style="width:100%">
        </td>
        <td class="right-image">
            <img src="https://example.com/image3.jpg" alt="Image 3" style="width:100%">
        </td>
    </tr>
</table>

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

A see-through section with a border that fades in transparency

Can anyone help me with creating a box with a unique design using CSS only? I want the box to have a rounded border that starts at 80% opacity at the top and gradually fades to 20% opacity at the bottom. Additionally, the border should start at 80% opaque ...

htmlcss

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

jqueryhtmlcss

The alignment of elements side by side in Angular Flex is not supported, specifically in versions Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

I'm attempting to arrange my boxes in a single line, with the ability to wrap and switch to column mode on smaller phone screens. Desired layout: Wins Losses Ties Points On shrinking screen: Wins Losses Ties Points Code ...

htmlangularflexboxangular-flex-layout

Embed a YouTube video within the product image gallery

Having trouble incorporating a YouTube video into my Product Image Gallery. Currently, the main product photo is a large image with thumbnails that change it. You can see an example on my website here. Whenever I attempt to add a video using the code below ...

javascriptjqueryhtmlyoutube

Transition one background image into another using background positioning

Snippet of code: https://jsfiddle.net/foy4m43j/ HTML: <div id="background"></div> CSS: #background { background-image: url("http://i.imgur.com/hH9IWA0.png"); background-position: 0 0; background-repeat: repea ...

javascriptjqueryhtmlcss

Combine various input data and store it in a variable

I am looking for a way to add multiple input text values together and store the sum in a variable. Currently, I can add the values and display it in an id, but I want to assign it to a variable instead. The condition for this variable is described below af ...

javascriptjqueryhtml

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

Executing a JavaScript function when a column in a Fusion Chart is clicked

I have two div elements in HTML and I would like to have div2 load when div1 is clicked. Additionally, whenever div2 loads, a back button should also appear to return to div1. Is there a way to achieve this using HTML? <td background="images/bgTd.gif ...

javascripthtml

Step-by-step guide: Crafting an UP Arrow solely with HTML and CSS

What is the method to utilize solely HTML and CSS for creating a triangle? I am in need of constructing a thick triangle, but want to achieve this using only CSS So far, I have experimented with the following code: .arrow-up { width: 0; height: 0 ...

htmlcss

Cross-domain scripting with JavaScript

I currently manage 2 subdomains securityservices.example.com workstations.example.com All workstations are associated with the workstations.example.com One of the workstations, known as WS789012 on the domain, is fully qualified as: WS789012.workst ...

javascripthtmlajax

`The Bootstrap Navigation Bar is not functioning properly on the published website.`

My Bootstrap Offcanvas Example navigation bar functions perfectly in my local environment. However, when I upload my build to a live website, the navigation links result in a 404 Error, indicating that the page does not exist. Interestingly, the footer at ...

htmlcssreactjstwitter-bootstrapbootstrap-5

PHP pattern substitution [ replace ]

Seeking assistance with two cases involving regular expressions in HTML code editing [parsing]. I currently use a parser with the following logic (example provided below with YouTube). Select the unique fragment (ED96RtfF22E) from the source HTML code of ...

phphtmlregexreplace

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

javascripthtmlarraysangularjsgoogle-maps

What is the standard way elements are displayed within a box that is positioned absolutely?

My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...

css

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

Currently facing an issue with the DropDown menu. Whenever I add padding to the DropDown menu (class - drop_link), it ends up pushing the entire element over the <nav>. I'm unsure of how to prevent this from occurring. I attempted to disable som ...

javascriptjqueryhtmlcssbootstrap-4

Typescript Angular2 filtering tutorial

In Angular 2 using TypeScript, the goal is to search for matching values from an array within an object array. The intention is to filter out any objects where the 'extraService' property contains any of the values from the 'array_values&apo ...

javascripthtmlangulartypescript

Adjust the background color using jQuery to its original hue

While working on a webpage, I am implementing a menu that changes its background color upon being clicked using jQuery. Currently, my focus is on refining the functionality of the menu itself. However, I've encountered an issue - once I click on a men ...

javascriptjqueryhtmlcssasp.net

Is there a method to add a border around a specific table row?

Trying to add borders around specific table rows that change colors when the mouse hovers over them. However, borders are not visible unless using border-collapse:collapse;. I need to avoid border-collapse because it causes issues with visibility at the to ...

htmlcsshtml-table

Refreshing HTML Form upon Submit using JavaScript

I've been searching through various discussions without any luck, but I'm encountering an issue with a form that successfully submits data to a Google Sheet, yet the input fields retain their content after submission. Here is the code: <form ...

javascripthtmljsonforms

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

I have developed a website that shows values with a set threshold. I now want to change the color of the values when they exceed the threshold, but I am unsure of how to proceed. I want to display consultation.indicateurs.TRS in red when it exceeds the va ...

javascripthtmlvue.js