Need to place images kinda like here (for example): http://imgur.com/QpRjvpW
Original pictures of different sizes.
Hover effect - blur and fogging effects and text on the middle of the picture.
Here is what I got for now: JSFiddle
So the question, how correctly position them, so that they occupy the entire width of the screen by 3 in a row, gonna be same size, closely adhering to the upper and lower div and to each other, don't expand within its borders? And the effect of the blur doesn't touch neighboring elements?
Remove class row and col-lg-12,use col-sm-12 like
<div class="col-sm-12">
<div id="work1" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
<p class="text">ONE</p>
</div>
<div id="work2" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
<p class="text">TWO</p>
</div>
<div id="work3" class="col-sm-4">
<img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
<p class="text">THREE</p>
</div>
</div>
CSS:
works img {
height: 600px;
width: 100%;}
Apply this css, you'll get the look like the example --
.works img{
display:block;
max-width:100%;
}
.works [class^="col-"] {
padding-left:0;
padding-right:0;
}
.works .text{
position:absolute !important;
left: 0;
right: 0;
}
Related
I'm trying to line up three pictures within a bootstrap grid. All of the images were centered, which is what I'm trying to, before I added a img-responsive class to one of the images. I do however want the images to be responsive while also making them a tiny bit larger than they are already. Tried numerous things such as "width: 200%;" however without success
How it looks
I created a "center-all" class within my css that should center all the three of them, and it did work, just until I added the img-responsive class to the red one. The class was not added to any of the other images.
.center-all {
text-align: center;
align-items: center;
align-content: center
vertical-align: center;
}
JSFiddle
https://jsfiddle.net/8a6ee7f5/
Images doesn't work in Fiddle ofc.
What I want to achieve:
I want the images to be 2 times larger than what they currently are and I want them to be responsive while still keeping them centered.
Thanks in advance!
I found the answer to my question(s).
When adding the img-responsive class to the image it moves to the left. By adding "center-block" to the class to the image it should stay in the center.
<img src="..." class="img-responsive center-block">
Now I just need to find the answer on how to upscale my pictures to 200%.
EDIT:
I found the following to upscale my images:
CSS
.wrapper {
width: 40%;
}
and added that to my image class.
HTML
<img src="..." class="img-responsive center-block wrapper">
And that fixed it.
So bootstrap already has an element centering class called .text-center you can just add this class to the row wrapping your items and everything in that row will be centered. Then instead of using .img-responsive you can add a width to the image instead or give the image a percentage width. It will maybe look something like the following hopefully this is what you are looking for:
Here is a fiddle Updated Fiddle
note: I have added a border-radius of 50% to your images because I assume you want them to be round. If you want to use 100px you can change it back.
Css:
#values img{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 80%;
}
#val1 {
background-color: #792c24;
}
#val2 {
background-color: #4f5e6d;
}
#val3 {
background-color: #665e25;
}
Html:
<div class="container" id="values">
<h3 class="fancy">Values</h3>
<div class="row text-center">
<div class="col-sm-4">
<h4>Independent</h4>
<img id="val1" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Team Player</h4>
<img id="val2" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Dedicate</h4>
<img id="val3" src="http://placehold.it/300x300">
</div>
</div>
</div>
What I'm trying to achieve is the image outside of the parent div's boundaries, which works in 1280x1024. How can I make this effect responsive?
Html:
<div class='row'>
<div class="divider">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<img src="http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/responsive.png" alt="laptop tablet phone responsive"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<h1>bla bla bla.</h1>
</div>
</div>
</div>
CSS:
.divider{
margin-top:100px;
min-height:175px;
margin-bottom:100px;
background-size: cover!important;
background-attachment: scroll;
background-image: url('http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/triangles.svg');
}
.divider div{
top:-50px;
The following image show's my problem, with the top half being the desired effect. And the bottom half is what happens when resizing the screen to smaller resolutions.
The problem seems to be that the image is resizing itself but the parent div is not, in this case I would change the values in pixels to values in vh and vw (these are percentages of "viewport height" and "veiwport width": the height and width of the window you are resizing.) for example:
margin-top:100px;
would become
margin-top:8vh;
By placing both the background image and the front image in HTML, and adding the following css rules they both scale the same.
.divider div{
top:-50px; // placing the image slightly above the divider div
height:125%; // making the div containing the image bigger than the divider div
}
.divider img{
width:100%; // just for this image because it isnt wide enough
position:absolute; // make sure the image listens to top:-50px;
}
ps: the images scale because of twitter bootstrap's css:
img {
height: auto;
max-width: 100%;
}
I am following my previous question that has two boxes, that have two images (can be vertical or horizontal), the issue is the height of boxes are fixed and when I change the window screen in some screen sizes the images bypass the border of the boxes.
I checked answers of these questions 1 and 2 but did not help much.
DEMO
CSS
.items { */
position: relative;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 0px;
text-align: left;
background-color: red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 1%;
height:260px;
}
.col-md-12.col-xs-12.btn>a>img {
float: right;
width: 100px;
height: 50px;
}
.col-md-12.col-xs-12.my-col {
padding-left: 100%;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.btn {
float: right;
bottom:0;
margin-right:-12px;
margin-bottom:-6px;
position:absolute;
right:0;
}
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="30%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="25%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
</div>
</div>
</div>
First off, the markup is over complicated for what you want and line 15 and 45 are applying bootstrap classes .col-md-12 and .row on the same element which is in incorrect. Bootstrap class .col-xx-nn must be assigned to a child element with a bootstrap class .row.
Getting back on track to what you want. I have simplified the HTML code to get your desired result, I think. Check it out and let me know what isn't right and I will change it and explain why.
https://jsfiddle.net/6y4uf16y/84/
What I did was create a container div around the sale image that uses the CSS flex box. This div will take up any remaining space. Therefore, if you change the height of your .items element. The flexbox container will adapt and the sale image will respond appropriately to the new size. There is no fixed heights here except for the one that was placed on the .items class of 260px which I believe is what you wanted.
The reason for this is that the bootstrap class .img-reponsive needs a height and/or width attribute to be responsive. Therefore, I have set the height and width equal to the flex box container around it. You can change the width value or .img-sale back to 30% if you wish.
Moreover, as a bonus, I have aligned the button to always be in the bottom right corner as I think you wanted it.
If this answer solves your problem, don't forget to mark it as the correct solution.
Cheers
Edit Sorry wrong JSFiddle link, correct link has been added. I also added proof that it is dynamic with multiple rows of text in the h4 and h5 elements.
You have to add class
.col-md-12 >a>img.btn {
float: right;
width: 100px;
height: 50px;
}
because .col-md-12.col-xs-12.btn>a>img is not applying to any of your given HTML div content
Is it a design requirement that the images get wider as the boxes get wider? If so, the only way to keep the images within the boxes is to increase the height of the boxes as you increase the height of the images.
If it's not a requirement that the images scale up, then you can see my solution here: http://jsfiddle.net/6y4uf16y/75/
All I did was remove the explicit widths from your images (the first was width="25%" and the second was width="30%") and instead used CSS to control the scale by limiting the max-height of the images. .items img {max-height:100px;}.
Since you have a fixed height and need to keep the images inside the boxes, you know for a fact that also have a fixed maximum height on the images
I am not sure if you can have line break on T1 & T2, otherwise you can do this
img{
max-height:170px;
width:auto
}
DEMO
i agree with #Bhavin Solanki and may be the one thing i will suggest that try to give the
width: 100px;
height: 50px;
in to percentages Or else you can go with Media queries for the particular image selectors that will help you to manage a lot
Your HTML Bootstrap code isn't totally correct:
You can't nest a .col-md-12 class inside a .col-md-3 class not
in my knowledge at least.
Your .rows classes are not always well positioned within the code
see the fiddle link that i prepared below.
I tried to do my best to understand what you want to achieve with your code i also ordered tags within your code so that your divs fit the window size regardless of its width.
EDIT
Try to define the width of your image with vw unit (width:15vw;) That will keep the image from crossing the containing item.
I illustrated an example for you here :
http://jsfiddle.net/merhzqwg/65/
Hope it helps.
OK this is the thing, your code is not very clean. there are some errors as well
for eg: you have used the id="imageresource" twice. An id can ONLY be used once on a single page. Very Important.
but i will provide a quick fix for this.
by default bootstrap adds max-width: 100%; height: auto; to the class img-thumbnail to override that what i have done is i have added a class to both of the images img-sale.
<img class="img-thumbnail img-sale" id="imageresource" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong" width="30%" style="margin-left: 30px;" />
and added the following css:
.img-sale {
max-height: 170px;
width: auto;
}
http://codepen.io/anon/pen/OVwrpJ?editors=110
http://jsfiddle.net/6y4uf16y/82/
but the rest of the code is not recommended to proceed with.
Currently learning html by way of coding cool sites I find online. I'm having some trouble figuring out how this site http://sociali.st uses one image for the iPhone case and another image for the iPhone screen (think clipping masks in photoshop). Can't seem to get my head around it?
Here's my code
<div class="row">
<div class="small-6 columns">
<h1 class="value-prop">Organize the <br>things you love.</h1>
</div>
<div class="small-6 columns">
<div class="phone">
<img src="http://sociali.st/wp-content/themes/socialist/library
/images/views/home/home-introduction-screen.png">
</div>
</div>
</div>
CSS
.phone {
width: 359px;
height: 935px;
background-image: url('http://sociali.st/wp-content/themes/socialist/
library/images/components/devices/device-iphone
-5c-perspective-left-shell#2x.png?cache=290611593');
background-size: 100% 100%;
}
The magic is done using absolute positioning and transparent backgrounds, more like photoshop layers.
Check this:
http://codepen.io/anon/pen/dGxhy
Use position: relative in the .phone so we can position its child elements based on its own top/left.
The #phone-content is already above the phone chrome due to the standard stacking order.
Then using the position, top and left properties we can move the content layer to match the desired placeholder
Raed some articles (example http://css-tricks.com/almanac/properties/p/position/) related to the css position attributes and it will be very clear to you ;)
There are many ways to do this, the easiest is probably using absolute positioning:
<div class="row">
<div class="small-6 columns">
<h1 class="value-prop">Organize the <br>things you love.</h1>
</div>
<div class="small-6 columns">
<div class="phone">
<img src="http://sociali.st/wp-content/themes/socialist/library/images/views/home/home-introduction-screen.png">
</div>
</div>
</div>
And css:
.phone {
position:relative;
width: 359px;
height: 935px;
background-image: url('http://sociali.st/wp-content/themes/socialist/library/images/components/devices/device-iphone-5c-perspective-left-shell#2x.png?cache=290611593');
background-size: 100% 100%;
}
.phone img{
top:130px;
position:absolute;
width:285px;
left:25px;
}
I added position:relative; to .phone because we are using the position:absolute; method.
Then, I just placed it to look like the screen.
I have div which includes:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content.
When img-tag exists then image is positioned at top of field-content and tile_content is under image.
This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.
Any ideas/tips how to make this work?
My CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
The only Thing you Need to know is vertical centering of div. This Problem is already solved here:
How to vertically center a div for all browsers?
You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
So your CSS Looks like
.field-content.has-image {
}
If I got your question correct, then simply,
Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse
OK, first time, I took it other way, I thought there are 3 divs, Sorry for that.
Here is the fiddle link:
enter code here
http://jsfiddle.net/happy2deepak/6U3kw/1/