not getting the css right
up vote
0
down vote
favorite
I have the requirement as per below image
I tried to this with table, but still no success in aligning the side images.
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>
My requirement:
I want to have center active image, with left and right images blur. side images should look like they are behind the center image
html css css3
add a comment |
up vote
0
down vote
favorite
I have the requirement as per below image
I tried to this with table, but still no success in aligning the side images.
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>
My requirement:
I want to have center active image, with left and right images blur. side images should look like they are behind the center image
html css css3
How would you like to align them? Exactly by the side of the center image?
– muka.gergely
Nov 7 at 18:12
I want to have center active image, with left and right images blur. side images should look like they are behind the center image.
– niraj17
Nov 7 at 18:17
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have the requirement as per below image
I tried to this with table, but still no success in aligning the side images.
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>
My requirement:
I want to have center active image, with left and right images blur. side images should look like they are behind the center image
html css css3
I have the requirement as per below image
I tried to this with table, but still no success in aligning the side images.
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>
My requirement:
I want to have center active image, with left and right images blur. side images should look like they are behind the center image
html css css3
html css css3
edited Nov 7 at 18:18
asked Nov 7 at 18:09
niraj17
476
476
How would you like to align them? Exactly by the side of the center image?
– muka.gergely
Nov 7 at 18:12
I want to have center active image, with left and right images blur. side images should look like they are behind the center image.
– niraj17
Nov 7 at 18:17
add a comment |
How would you like to align them? Exactly by the side of the center image?
– muka.gergely
Nov 7 at 18:12
I want to have center active image, with left and right images blur. side images should look like they are behind the center image.
– niraj17
Nov 7 at 18:17
How would you like to align them? Exactly by the side of the center image?
– muka.gergely
Nov 7 at 18:12
How would you like to align them? Exactly by the side of the center image?
– muka.gergely
Nov 7 at 18:12
I want to have center active image, with left and right images blur. side images should look like they are behind the center image.
– niraj17
Nov 7 at 18:17
I want to have center active image, with left and right images blur. side images should look like they are behind the center image.
– niraj17
Nov 7 at 18:17
add a comment |
3 Answers
3
active
oldest
votes
up vote
1
down vote
accepted
Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123@gmail.com :)
<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>
1
Thanks, this is nice example. Actually according to my requirement, images should look like they are coming in front. so left and right images should look like they are underneath the central image. Also i needed some clarification from your above code: 1) this css style "width: 300%;" is because we have 3 slides right ? 2) Also can you explain this part "width: calc((70% / 3) - 40px);".
– niraj17
Nov 7 at 21:00
1
1) yes the width 300% is because we have 3 slides. 2) 70% because we dont want the slide width to take all 100% width. We / 3 because 70% from 300% slide would be 210% but we need the room for 3 slides so we devide that by 3. And we - 40px because we have margin 20px on each side thats 40px.
– Kristers Dzintars
Nov 8 at 6:08
1
I updated the file jsfiddle.net/c6fmxo90/8 go and check it out! I added the effect that the side slides are behind.
– Kristers Dzintars
Nov 9 at 18:40
add a comment |
up vote
0
down vote
Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/
i have done this type of view. I want the view as described in my image.
– niraj17
Nov 7 at 18:23
add a comment |
up vote
0
down vote
Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the 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://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
this looks good, just that i want the image height and width be same. Also the left and right images should look like they are behind the central image
– niraj17
Nov 7 at 18:22
Try height: auto on the img s - I cannot test it right now, sorry
– muka.gergely
Nov 7 at 19:47
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123@gmail.com :)
<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>
1
Thanks, this is nice example. Actually according to my requirement, images should look like they are coming in front. so left and right images should look like they are underneath the central image. Also i needed some clarification from your above code: 1) this css style "width: 300%;" is because we have 3 slides right ? 2) Also can you explain this part "width: calc((70% / 3) - 40px);".
– niraj17
Nov 7 at 21:00
1
1) yes the width 300% is because we have 3 slides. 2) 70% because we dont want the slide width to take all 100% width. We / 3 because 70% from 300% slide would be 210% but we need the room for 3 slides so we devide that by 3. And we - 40px because we have margin 20px on each side thats 40px.
– Kristers Dzintars
Nov 8 at 6:08
1
I updated the file jsfiddle.net/c6fmxo90/8 go and check it out! I added the effect that the side slides are behind.
– Kristers Dzintars
Nov 9 at 18:40
add a comment |
up vote
1
down vote
accepted
Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123@gmail.com :)
<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>
1
Thanks, this is nice example. Actually according to my requirement, images should look like they are coming in front. so left and right images should look like they are underneath the central image. Also i needed some clarification from your above code: 1) this css style "width: 300%;" is because we have 3 slides right ? 2) Also can you explain this part "width: calc((70% / 3) - 40px);".
– niraj17
Nov 7 at 21:00
1
1) yes the width 300% is because we have 3 slides. 2) 70% because we dont want the slide width to take all 100% width. We / 3 because 70% from 300% slide would be 210% but we need the room for 3 slides so we devide that by 3. And we - 40px because we have margin 20px on each side thats 40px.
– Kristers Dzintars
Nov 8 at 6:08
1
I updated the file jsfiddle.net/c6fmxo90/8 go and check it out! I added the effect that the side slides are behind.
– Kristers Dzintars
Nov 9 at 18:40
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123@gmail.com :)
<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>
Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123@gmail.com :)
<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>
edited Nov 7 at 20:22
answered Nov 7 at 19:49
Kristers Dzintars
578
578
1
Thanks, this is nice example. Actually according to my requirement, images should look like they are coming in front. so left and right images should look like they are underneath the central image. Also i needed some clarification from your above code: 1) this css style "width: 300%;" is because we have 3 slides right ? 2) Also can you explain this part "width: calc((70% / 3) - 40px);".
– niraj17
Nov 7 at 21:00
1
1) yes the width 300% is because we have 3 slides. 2) 70% because we dont want the slide width to take all 100% width. We / 3 because 70% from 300% slide would be 210% but we need the room for 3 slides so we devide that by 3. And we - 40px because we have margin 20px on each side thats 40px.
– Kristers Dzintars
Nov 8 at 6:08
1
I updated the file jsfiddle.net/c6fmxo90/8 go and check it out! I added the effect that the side slides are behind.
– Kristers Dzintars
Nov 9 at 18:40
add a comment |
1
Thanks, this is nice example. Actually according to my requirement, images should look like they are coming in front. so left and right images should look like they are underneath the central image. Also i needed some clarification from your above code: 1) this css style "width: 300%;" is because we have 3 slides right ? 2) Also can you explain this part "width: calc((70% / 3) - 40px);".
– niraj17
Nov 7 at 21:00
1
1) yes the width 300% is because we have 3 slides. 2) 70% because we dont want the slide width to take all 100% width. We / 3 because 70% from 300% slide would be 210% but we need the room for 3 slides so we devide that by 3. And we - 40px because we have margin 20px on each side thats 40px.
– Kristers Dzintars
Nov 8 at 6:08
1
I updated the file jsfiddle.net/c6fmxo90/8 go and check it out! I added the effect that the side slides are behind.
– Kristers Dzintars
Nov 9 at 18:40
1
1
Thanks, this is nice example. Actually according to my requirement, images should look like they are coming in front. so left and right images should look like they are underneath the central image. Also i needed some clarification from your above code: 1) this css style "width: 300%;" is because we have 3 slides right ? 2) Also can you explain this part "width: calc((70% / 3) - 40px);".
– niraj17
Nov 7 at 21:00
Thanks, this is nice example. Actually according to my requirement, images should look like they are coming in front. so left and right images should look like they are underneath the central image. Also i needed some clarification from your above code: 1) this css style "width: 300%;" is because we have 3 slides right ? 2) Also can you explain this part "width: calc((70% / 3) - 40px);".
– niraj17
Nov 7 at 21:00
1
1
1) yes the width 300% is because we have 3 slides. 2) 70% because we dont want the slide width to take all 100% width. We / 3 because 70% from 300% slide would be 210% but we need the room for 3 slides so we devide that by 3. And we - 40px because we have margin 20px on each side thats 40px.
– Kristers Dzintars
Nov 8 at 6:08
1) yes the width 300% is because we have 3 slides. 2) 70% because we dont want the slide width to take all 100% width. We / 3 because 70% from 300% slide would be 210% but we need the room for 3 slides so we devide that by 3. And we - 40px because we have margin 20px on each side thats 40px.
– Kristers Dzintars
Nov 8 at 6:08
1
1
I updated the file jsfiddle.net/c6fmxo90/8 go and check it out! I added the effect that the side slides are behind.
– Kristers Dzintars
Nov 9 at 18:40
I updated the file jsfiddle.net/c6fmxo90/8 go and check it out! I added the effect that the side slides are behind.
– Kristers Dzintars
Nov 9 at 18:40
add a comment |
up vote
0
down vote
Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/
i have done this type of view. I want the view as described in my image.
– niraj17
Nov 7 at 18:23
add a comment |
up vote
0
down vote
Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/
i have done this type of view. I want the view as described in my image.
– niraj17
Nov 7 at 18:23
add a comment |
up vote
0
down vote
up vote
0
down vote
Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/
Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/
answered Nov 7 at 18:16
Khurram Shaikh
113
113
i have done this type of view. I want the view as described in my image.
– niraj17
Nov 7 at 18:23
add a comment |
i have done this type of view. I want the view as described in my image.
– niraj17
Nov 7 at 18:23
i have done this type of view. I want the view as described in my image.
– niraj17
Nov 7 at 18:23
i have done this type of view. I want the view as described in my image.
– niraj17
Nov 7 at 18:23
add a comment |
up vote
0
down vote
Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the 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://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
this looks good, just that i want the image height and width be same. Also the left and right images should look like they are behind the central image
– niraj17
Nov 7 at 18:22
Try height: auto on the img s - I cannot test it right now, sorry
– muka.gergely
Nov 7 at 19:47
add a comment |
up vote
0
down vote
Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the 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://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
this looks good, just that i want the image height and width be same. Also the left and right images should look like they are behind the central image
– niraj17
Nov 7 at 18:22
Try height: auto on the img s - I cannot test it right now, sorry
– muka.gergely
Nov 7 at 19:47
add a comment |
up vote
0
down vote
up vote
0
down vote
Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the 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://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the 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://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
<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://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
<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://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
answered Nov 7 at 18:17
muka.gergely
596312
596312
this looks good, just that i want the image height and width be same. Also the left and right images should look like they are behind the central image
– niraj17
Nov 7 at 18:22
Try height: auto on the img s - I cannot test it right now, sorry
– muka.gergely
Nov 7 at 19:47
add a comment |
this looks good, just that i want the image height and width be same. Also the left and right images should look like they are behind the central image
– niraj17
Nov 7 at 18:22
Try height: auto on the img s - I cannot test it right now, sorry
– muka.gergely
Nov 7 at 19:47
this looks good, just that i want the image height and width be same. Also the left and right images should look like they are behind the central image
– niraj17
Nov 7 at 18:22
this looks good, just that i want the image height and width be same. Also the left and right images should look like they are behind the central image
– niraj17
Nov 7 at 18:22
Try height: auto on the img s - I cannot test it right now, sorry
– muka.gergely
Nov 7 at 19:47
Try height: auto on the img s - I cannot test it right now, sorry
– muka.gergely
Nov 7 at 19:47
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53195302%2fnot-getting-the-css-right%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
How would you like to align them? Exactly by the side of the center image?
– muka.gergely
Nov 7 at 18:12
I want to have center active image, with left and right images blur. side images should look like they are behind the center image.
– niraj17
Nov 7 at 18:17