I would like to float 5 pictures next to eachother; Upon hover of any of them i want the hovered over image to grow in width without pushing the images next to it Away from it. I want everything to stay in place but for the picture being hovered over to grow in size. How would i do this.
Live demo
Hi now used to this css without floating
Css
.parent{
border:solid 1px red;
width:100px;
white-space:nowrap;
font-size:0;
}
.parent img{
border:solid 1px black;
vertical-align:top;
}
HTML
<div class="parent">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
</div>
Live demo
---------------
Updated demo
Related
If an image overflows its container and I want to crop it, it's easy enough from the right (the default action is that the image is anchored to the top left of the div) and there are various ways of cropping to the centre.
What I would like to do is crop from the left. In other words so that the image is anchored to the top and right of the enclosing div.
Needless to say I need a solution that works without knowing the div width and although I will know the image width, I don't see how this helps.
I can see the background image solution to this issue but it would be nice to use the image as an element so I can apply retina images. It would also be nice not to have to use Javascript.
Any ideas, hive mind?
If I come up with a partial solution I will paste the code but at the moment I'm unsure how to proceed.
Use flexbox and adjust the alignment:
.box {
width:100px;
height:100px;
margin:20px;
display:inline-flex;
vertical-align:top;
/* overflow:hidden uncomment this to hide the overflow*/
border:1px solid;
align-items:flex-start;
}
img {
opacity:0.4;
}
<div class="box">
<img src="https://picsum.photos/150/150?image=1069" >
</div>
<div class="box" style="align-items:center;justify-content:center;">
<img src="https://picsum.photos/150/150?image=1069" >
</div>
<div class="box" style="align-items:flex-end;">
<img src="https://picsum.photos/150/150?image=1069" >
</div>
<div class="box" style="align-items:flex-end;justify-content:flex-end;">
<img src="https://picsum.photos/150/150?image=1069" >
</div>
Flexbox can do that
div {
margin: 1em auto;
width: 200px;
border: 5px solid red;
display: flex;
justify-content: flex-end;
overflow: hidden;
/* toggel to see overflow */
}
img {
display: block;
opacity: .5/* to show overflow */
}
<div>
<img src="http://www.fillmurray.com/460/300" alt="">
</div>
hello all I have three div and parent div have white-space:nowrap when I write large text inside child div all wards is only one line, how can I solve this problem without using white-space:normal for child div
here is html
<div class="history_slider">
<div class="img">
<img src="img/pic/nemiroff.jpg"/>
<div class="img_text">
which suggests that it formed from nebulous material in space. The hypothesis offers explanations for some of the Solar System's properties, including the nearly circular and coplanar orbits of the planets, and their motion in the same direction as the Sun's rotation. According to the hypothesis, Sun-like stars form over about 100 million years, in massive, grav
</div>
</div>
</div>
here css
.history_slider{
position:relative;
width:100%;
height:100%;
/* outline:1px solid #d6d7db; */
overflow:hidden;
white-space: nowrap;
}
.history_slider .img{
margin-left:125px;
margin-right:125px;
width:700px;
height:500px;
display:inline;
}
.img_text{
float:left;
width: 100%;
height: 110px;
}
I want to have a solid grey bar in a DIV called "bottomGrey" at the bottom of a container DIV called "contactCopy".
<div id="contactCopy">
<div id="contactLeft">
CONTACT
</div>
<div id="contactRight">
<iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x87e2349d140afa9f%3A0x9b41dc0528aa1d72!2s131+W+2nd+St+%23400%2C+Davenport%2C+IA+52801!5e0!3m2!1sen!2sus!4v1389913120076" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div id="bottomGrey"></div>
<div class="clr"></div>
</div>
the CSS
#contactLeft{
float:left;
width:30%;
padding:5%;
}
#contactRight{
float:left;
width:640px;
height:480px;
padding-top:5%;
padding-bottom:5%;
margin-left:5%;
position:relative;
}
#contactCopy{
position:relative;
}
#bottomGrey{
position:absolute;
bottom:0;
height:10%;
width:100%;
}
but it doesn't display at all, even if I remove the "contactLeft" and "contactRight" DIVS.
This should be simple but :(
Live site: http://estes.nbson.com/contact.html
It is displaying: its just got a white background and no content. Add a background color to it and you'll see what I mean.
Just add this to your CSS:
#contactCopy:after {
display: block;
height: 10px;
width:100%;
background-color: grey;
content: "";
clear: both;
}
With that you can remove <div id="bottomGrey"></div> and <div class="clr"></div> from your HTML structure, and get the grey border and clearing at the same time.
Give it a background color, 100% width and some content. Also Assuming the clr class is a clear fix implementation. Put it be for the bottom grey div. So contact copy will have a proper height, and bottom grey will sit bellow both floated divs. No need for the absolute position.
My html code is
<div style="border:1px solid red; height:140px;">
<div style="width:100px; float:left; border:1px solid blue;">
left
</div>
<div style="width:100px; float:right; border:1px solid blue; ">
right
</div>
<div style="border:5px solid green;">
middle
</div>
</div>
Why does the green border spreads to the 100% of width and covers left and right divs? How to fix it so it covers the only block that starts with the word "middle" and ends right before the word "right"?
Just tried position:relative; but it didn't help.
The example of the code is here:
jsFiddle
Write overflow:hidden to it.
<div style="border:5px solid green;overflow: hidden;">
middle
</div>
Check this http://jsfiddle.net/A6qWE/1/
Add overflow:auto
http://jsfiddle.net/A6qWE/7/ check this demo
add overflow:hidden to the style of the div containing the word middle
Add a margin to the middle div margin: 0 100px
See example of the code # jsFiddle
i have following block of the code on my page
<div style="width:100%; ">//div0
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div2
Image 2
</div>
</div>
what i want is, these two div should combine to make a larger div. as their width is divided to 50% each, they should be positioned LEFT AND RIGHT TO EACH OTHER, but in reality, the div2 is positioned BELOW the div1
can somebody explain me what should i do? and what is the problem with my simple code?
This is a very basic css issue. What you should look into is the float property in CSS. Without floating, all elements on the page will be positioned one after another.
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>
That should achieve what you want.
EDIT: actually the above wouldn't work either. Because you have a border. Think about is this way. Your page has 100% width. If your page is 1000px wide. Your divs will each take up 50% or 500px of the screen estate. Your border will take up 4 x 2 = 8px or 0.8% of the page. In total you'll add up to 101.6% of the page. Which will force the divs to load one after another.
To actually witness the effect of floating left and right, remove the border or reduce the width:
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>
<div style="width:50%; background:#f1f1f1; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; float: right;">//div2
Image 2
</div>
Also note that your depending on your page width, your percentage will have different effects. The 45% and 4px border isn't going to play along nicely all the time. If you want full screen perfectly positioned left and right box, it's better to do it without the border and do additional styling inside each div.