Develop Reference

How to center a caption and pop up text on an image in html and css

I'm currently trying to code a website for the first time, and have run into the problem that when I'm trying to caption an image in a gallery and add a pop up info slide that it isn't centered under the image, but instead it is to the right of the image. The image should always have a caption, and when you scroll over the image a text box should go up, so that a description could be read. I'm not very sure how to fix the problem since I thought I had already centered the text. If anyone can help me I'll be very grateful.
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
https://jsfiddle.net/b0gdpmjw/
image with caption
image with caption and pop up description

Position: Absolute; and flexbox structure, will do what you want.
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_positioning.asp

the solution is to specify the position from left for .text.
(tipp: i think it is a good idea to start with bootstrap. with bootstrap you can build up the basic framework of a website relatively easy, so that it also works on the smartphone. afterwards you can customize everything yourself as you like. to build up the basic framework of a website yourself and make it responsive for different devices is very difficult as a beginner. so you run from one big problem into the next. latest when you start with media-queries, you can hardly keep track of it all.)
figcaption {
color: white;
font-style: oblique;
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.column1 {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
p {
color: black; /* changed to black, so you can see the text */
font: 25px Sulphur Point, sans-serif;
}
.text {
position: absolute;
bottom: 0;
/* right: 0;*/
left: 0; /* here */
width: 200px;
height: 0;
text-align: center;
transition: height 0.7s ease-out;
}
.column1:hover>.text {
height: 150px;
}
.column1 {
float: left;
width: 33.33%;
padding: 5px;
margin-bottom: 50px;
}
/* Clearfix (clear floats) */
.row1::after {
content: "";
clear: both;
display: table;
margin-bottom: 50px;
}
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>

JQuery mobile: Vertically and horizontally center multiple images using grid

I'm building an app using jquery mobile.
I want to vertically and horizontally center multiple images using grid, i want the images to be exactly in the center of the page. I'v tried everything but nothing really worked.
I want it exactly to look like whats in this pic:
Sample
and here is my code:
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
</div>
</div>
I would love if it can look exactly like the image attached.
Thank you.

You can scale the content div to take the device height:
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
})
});
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
Then use some CSS on the grid to center everything within the scaled content:
<div id="GridWrapper">
<div class="ui-grid-a centeredGrid">
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
</div>
</div>
#GridWrapper{
position: relative;
height: 100%;
}
#GridWrapper .centeredGrid{
position: absolute;
width: 380px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO

You can try with flexbox properties.
.ui-block-a,.ui-block-b{
width: 30px;
height: 30px;
margin: 5px;
}
.ui-grid-a{
display: flex;
align-items: center;
min-height: 15em;
justify-content: center;
}
For further information about flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Can't center my slider

I have tried many things to center this slider. This includes align="center" style="margin: 0 auto;" style="margin-right: 0 auto; margin-left: 0 auto;". All of these I have tried on the images and slider div too. I am not sure what what the problem is and any help would be very much appreciated. This is my first time posting so sorry if this is not the correct format. Below is the code I am having trouble with
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
#slideshow {
margin: 0px auto;
position: relative;
max-width: 1200px;
height: 720px;
<!-- padding: 10px;
--> box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.ppt img {
margin-left: -50%;
}
.ppt li {
left: 50%;
}
#slideshow > div {
position: absolute;
}
.clear {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div id="slideshow">
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
</div>
</div>

Your slideshow is centered. It's the images themselves that aren't centered. You can see evidence of this in this jsfiddle. Centering the images would have more to do with your absolute positioning. You can use left: 50%; transform: translate(-50%, 0); to center the images if that is the goal.

Firstly, bunch of bad practices:
Too many inline
Don't need divs inside the slider. Try a list. Better
code management.
Now to the problem. You can simply use
margin: auto;
for the #slideshow to horizontally centre it.

How to put four images 2x2 on other image as background, CSS?

I try to put 4 images (same size) on 5th image defined as BG.
This is how it looks like now:
It works fine if height is fixed but in my case the height might change and I get this behavior:
This issue is not surprises me because I use % but not px.
When width changes, the style left: 13% changes
Very important!!! I can use only "%"
How can I achieve 1st image I posted even if height changes?
Here is relevant code:
<!-- BG image -->
<div style="position: relative; right: 0; top: 0; height:100%">
<img src="img/groups/pic-shade.png" style="
position: relative;
top: 0%;
right: 0%;
height: 17.6%;
">
<!-- left-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 13%;" src="img/group_6.png">
<!-- left-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 13%;" src="img/group_6.png">
</div>
[EDIT]
I tried to put right: 0% instead left: 13% but it doesn't help me because BG div has bigger width then BG image:
Here is root DIV selected:

DEMO
Don't use position absolute -- it breaks the flow and relationship between elements which means they can not show any response to each others width height changes.
Instead use the table technique -- check the demo.
HTML
<div class="bg-image-wrapper">
<div class="table">
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
</div>
</div>
CSS
img{
display:block;
}
.table{
display: table;
}
.row{
display: table-rwo;
}
.cell{
display:table-cell;
}
.bg-image-wrapper{
display: inline-block;
background: url(http://placehold.it/200x200);
border-radius: 10px;
overflow: hidden;
}

<!-- BG image -->
<div style="background-image:url("img/groups/pic-shade.png"); position: relative; right: 0; top: 0; height:100%">
<table>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
</div>

How to give space between images?

I am building my own website with Dreamweaver. I have an portfolio page with an gallery which I used from this tutorial: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/#comment-16950
The images from the tutorial are smaller but I want them bigger like: 324 by 322 px.
Also they make a columm of 4 images next to each other and I want to have 3 to each other.
But when I try that, my images don't go perfectly next to each other.
Here is what I have:
<div class="portfolio">
<article class="entry video">
<a data-rel="prettyPhoto" href="#">
<img class="top" src="images/knop-1.jpg" alt="">
<span class="magnifier"></span>
</a>
</article>
(this article div repeats for every new image)
Some of the CSS:
.portfolio {
width: 960px;
height:auto;
overflow: hidden;
position: relative;
margin:15px;
}
.magnifier {
background:url(images/knop-hover1.jpg) no-repeat center;
width:324px;
height:322px;
position:absolute;
top:10px;
left:10px;
bottom:10px;
right:10px;
opacity:0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
img.top {
position:absolute;
left:0;
right:5px;
}
I hope you guys can help me out.
Thanks!

It looks like you're missing the JQuery from the tutorial. You'll need to add that before it all works like the demo. I notice you're missing a closing /div tag and your img tag should close itself at the end like this: /> instead of just >.
If you want three images instead of four you can make them auto center by applying a width to a surrounding div that encompasses the individual images. Then that surrounding div needs to be inside a larger content div or main div. The main div will have a set width, floated left. Then you can set margin:0 auto; for the surrounding div and it will center everything. You can add some margin to the single image divs to give them some breathing room, too. I made a code snippet so you can see visually what I mean.
.main {
width: 700px;
float: left;
display: block;
background: pink;
}
.surrounding {
width: 510px;
display: block;
margin: 0px auto;
}
.single {
width: 150px;
float: left;
margin: 10px;
}
.single img {
width: 150px;
height: 150px;
}
<div class="main">
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
</div>
An observation, though. 3 images at 324px width are going to be at least 976px when side by side. That is larger than the width you've set for your page. Maybe you're referring to their sized once clicked?