I'm trying to move my horizontal row of images up a few pixels. How do I go about this? I'm a newbie.
This is my sample image. dont mind the mind blowing series of letters and numbers :) It is just a src code.
To move your images up a few pixels you should use the transform css style.
Its up to you if you want to set it in a class or id or directly in the img element as shown below. and set translateY([value]px) and your good to go..
Setting it to negative number of pixels will move the element or your image upward and otherwise if positive.
I hope it satisfies you. :)
Welcome to SO....
img
{
transform:translateY(-50px)
}
<img src="data:image/jpeg;base64,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" />
see if this works for you
.row img{
border: 1px solid #111;
box-shadow: 2px 5px 1px rgba(0,0,0,0.5);
}
.row1 img{
bottom: 8px;
position: relative;
}
.row2 img{
margin-bottom: 14px;
}
<div class="row row1">
<div class="col-md-12">
some text
</div>
<div class="col-md-12">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<div class="col-md-12">
some text
</div>
</div>
<hr/>
<div class="row row2">
<div class="col-md-12">
some text
</div>
<div class="col-md-12">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<div class="col-md-12">
some text
</div>
</div>
Related
This is similar to the layout I'm trying to achieve:
The code I have now
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
I have tried using CSS class "no-padding" and also tried playing around with margins. when i apply 0 padding, the left side of the first image touches the edge of the browser( this is desired), however the other edge(right side of image) still has some empty space.
How do I get rid of that empty space get the results like the reference layout?
.col-md-6{
padding-right: 0px;
padding-left: 0px;
}
There could be an issue with the <p> padding/margin, could also be an issue with the <img> padding/margin. However it seems to be an issue with the sizing of the elements within the row.
I did however seemingly fix the issue in my PEN HERE
I added a height: *** to the row class, this may be needed for desired results as you are using row-eq-height bootstrap class.
HTML
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
CSS
p{
margin: 0;
padding: 0;
}
img{
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
height:60px;
background-color: #eee
}
If using the LESS/SASS source: change #grid-gutter-width in the variables file to 0
If you want to get rid of the white space you will need to make your image bigger to span the cols. You can manually adjust the width of an image using css:
img {
width: 100%;
}
Couldn't find an answer to this so..
It's probably a very simple solution but I've been tunnel visioning for the past 20 minutes and it's frustrating me.
The padding of an image, which I'm trying to give a circle background element, is really annoying.
Margin doesn't work either.
My image is 120 px large, and the padding of 2em just makes it smaller, but I want it to stay the same size, but have a bigger background size.
Here's the code:
<div class="row">
</div class="container-fluid">
<div class="col-md-4 img-icon-pad">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
/* Boxes */
.img-icons {
height: 120px;
width: auto;
background-color: #f8f8ec;
border: 2px solid #e97117;
padding: 2em;
border-radius: 50%;
}
.img-icon-pad {
}
And a screenshot of what I mean:
No padding
https://i.gyazo.com/745896ad418274f70e8189f6b84c7b6d.png
Padding:
https://i.gyazo.com/b2a264d8a361a426cc43992d90352e79.png
I think it is ok
<div class="row">
<div class="container-fluid">
<div class="col-md-4 ">
<div class="thumbnail">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<style>
.thumbnail {
height: 150px;
width: 150px;
border: 2px solid #e97117;
background-color: #f8f8ec;
padding: 2em;
}
</style>
Did you increase the height of .img-icons class from 120 to 150px or bigger if you want.
If that doesn't work then you have probably restricted size of the div containing the img.
I was going to say that in .img-icons class you have width set to auto. This may be causing resizing. If you set it to a fixed width it may not resize.
i think this is what are you trying to do :
<div class="row">
<div class="col-md-4">
<div class="img-responsive img-icons" >
<div class="img">
</div>
</div>
</div>
</div>
css:
.img-icons {
height: 120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
border-radius: 50%;
padding: 2em;
}
.img{
text-align:center;
height:120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
}
you can see the result here https://jsfiddle.net/nt0zqc1t/3/
Im trying to make these images to be displayed nicely inline and change its position/size depending on the screen size. This is my HTML code:
<div class="row tryRow white">
<div class="col-xs-4 portfolio-item leftPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/FMA.png" />
<p class="imgDescription">
Some text in here </p>
</div>
</div>
<div class="col-xs-4 portfolio-item centerPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/SFK.png" />
<p class="imgDescription">
Some text in here
</p>
</div>
</div>
<div class="col-xs-4 portfolio-item rightPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/CTG.png" />
<p class="imgDescription">
Some text in here </p>
</div>
</div>
</div>
These images display some text below them when they are hovered on.
This is CSS of one of the images:
.leftPic {
opacity:0.5;
border-radius:4px;
max-width: 33%;
width:auto;
}
As you can see I am trying to set the max width to 33% as I have 3 images per line, but the margins are not correct and to be honest there is a large problem with this.
Problem: To make them shrink, re-position depending on the browser while keeping the relatively sharp look.
i tried with this one:
.tryRow{ display: inline-block;}
Hmmm... I would approach it in a different way setting background-image instead of using html <img>. As you expect nice responsive behavior and your images are quite small have a look at this:
<div class="row">
<div class="col-md-4">
<div class="image image-1">Some text</div>
</div>
<div class="col-md-4">
<div class="image image-2">Some text</div>
</div>
<div class="col-md-4">
<div class="image image-3">Some text</div>
</div>
</div>
.image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
// height: control it with media queries
}
.image-1 {
background-image: url(path/to/image-1.jpg);
}
.image-2 {
background-image: url(path/to/image-2.jpg);
}
.image-3 {
background-image: url(path/to/image-3.jpg);
}
This approach will also give you more flexibility styling those boxes content.
Text over image. I can't seem to get my text over my picture. I tried with absolution and everything.
<div class="wrapper">
<div class="container">
<div class="row">
<div class="stages col col-6">
<img src="styles\images\stage1.jpg" alt="Stage1">
<p>Stage 1</p>
</div>
<div class="stages col col-6">
<img src="styles\images\stage2.jpg" alt="Stage2">
<p>Stage 2</p>
</div>
</div>
</div>
You are not applying it correctly.
To make it work, you need to make the parent div to have a position:relative; and the child div to have position:absolute;
Once you do the position:absolute;, you need to change the positioning by attributes such as top, bottom, left and right with numeric values.
Just in case, if your text is below the image, you can use z-index attribute to bring it up with a numeric value.
For Instance,
<div class="wrapper">
<div class="container">
<div class="row" style="position:relative;">
<div class="stages col col-6">
<img src="styles\images\stage1.jpg" alt="Stage1">
<p style="position:absolute;top: 0;left: 0;">Stage 1</p>
</div>
<div class="stages col col-6">
<img src="styles\images\stage2.jpg" alt="Stage2">
<p>Stage 2</p>
</div>
</div>
</div>
LIVE DEMO
Hope this helps.
It would be better to manage it through classes. Add image-container to the parent div of image, and text-over-img to p tag used for text.
.image-container {
position: relative;
}
.text-over-img {
position: absolute;
background-color: red;
padding: 5px;
border-radius: 5px;
top: 0px;
left: 5px;
margin-top: 5px;
}
DEMO
I'm a visual designer, so this may seem a silly question (and at one point, this wasn't broken!) but I'm stuck. I'm trying to get images to appear in a responsive row with a mouseover.
Can anyone help? I know the code is jacked; I've been struggling with the order of the divs. The mouseover is working, BUT the images are now stacking and aren't appearing in a row anymore. They're outside of the col-lg-4 container, but I've included that. What am I missing?
*image is FPO
/// HTML:
<div class="col-lg-12">
<div class="highlight">
<h3>LOREM IMPSUM DOLAR</h3>
<h5>The fox and the rabbit.</h5>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
/// JSFiddle:
http://jsfiddle.net/zvcNa/
This is due to your padding: 30px 40px; for figcaptions{}.
figcaptions is 100% width and height, but add your padding to this size.
Remove this padding and add it to your figcaptions children :
figcaptions h4{
padding:30px;
}
FIDDLE
EDIT #1:
Replaced :
figure {
display: block;
position: relative;
}
.col-lg-4 {
display:block;
float:left;
}
FIDDLE