3 images next to each other with text

Question

I want 3 images next to each other, but to fill the entire screen. So i have this:

    .container {
        position: relative;
        text-align: center;
        color: white;
        max-width: 99%;
    }
    img.forside,
    img.forside-1,
    img.forside-2 {
        opacity: 0.7;
    }
    img.forside:hover,
    img.forside-1:hover,
    img.forside-2:hover {
        transition: 1s ease;
        opacity: 1;
        filter: brightness(70%);
    }
    img.forside-2 {
        width: 30%;
        display: inline-block;
        margin-top: 2%;
    }
    img.forside-1 {
        width: 30%;
        display: inline-block;
        margin-left: 2%;
        margin-right: 3%;
        margin-top: 2%;
    }
    img.forside {
        width: 30%;
        display: inline-block;
        margin-right: 3%;
        margin-top: 2%;
    }

<div class="forsidebilleder">
    <a href="index.php/personlig-traening"><img class="forside-1" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
    </a>
    <a href="index.php/individuel-programmering"><img class="forside" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
    </a>
    <a href="index.php/crossfit-bootcamp"><img class="forside-2" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
    </a>
</div>

I know that can be written better, but I couldn't get it to work. But this way, the 3 images is perfectly next to each other with same amount of space in each side. But what I want, is to write a headline over each image, but I don't know how?

You understand the question? :) Sorry if it's a bit messy.

Try to use flex. properties such as display:flex; flex-direction:right; . Using basic flex properties, you can align anyway you want. — Vikas Yadav, Nov 28 '17 at 09:55

Temani Afif · Accepted Answer · 2017-11-28T10:46:29.737

2

You can simply use flex and consider background image in order to use text over it. You may also add an overlay to control the opacity of the image :

UPDATE

Added media query for better view on mobile

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.image {
  position: relative;
  flex: 1;
  margin: 5px;
  text-align: center;
  background-size: cover;
  display: flex;
  align-items: center;
}

.image:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: 1s;
}

.image:hover::before {
  background: rgba(0, 0, 0, 0.5);
}

.image p {
  position: relative;
  z-index: 1;
  flex: 1;
  color: #fff;
  font-size: 18px;
}

@media all and (max-width:460px) {
  .container {
    flex-direction: column
  }
}

<div class="container">
  <div class="image" style="background-image:url(https://lorempixel.com/400/600/)">
    <p>text text</p>
  </div>
  <div class="image" style="background-image:url(https://lorempixel.com/500/400/)">
    <p>text text</p>
  </div>
  <div class="image" style="background-image:url(https://lorempixel.com/600/600/)">
    <p>text text</p>
  </div>
</div>

You may adjust margin and height like you want.

edited Nov 28 '17 at 10:46

answered Nov 28 '17 at 09:55

Temani Afif

245,468
26
309
415

I want the text ON the image :) Not below but like if it was written on the image :) – Daniel Jensen Nov 28 '17 at 09:56
@DanielJensen check again :) – Temani Afif Nov 28 '17 at 10:02
Yea, the text is perfect, but the hover effect is gone. :/ – Daniel Jensen Nov 28 '17 at 10:03
Looks great! I'll just try to insert it to my page :) – Daniel Jensen Nov 28 '17 at 10:05
@DanielJensen another update to make image take whole screen ;) – Temani Afif Nov 28 '17 at 10:10
Holy s***, it worked! :) Thank you so much! Just a last question then. Each image had a link (href). Where should I put this code? – Daniel Jensen Nov 28 '17 at 10:15
Oh, and when I surf the site from my phone, the pictures are way to big? – Daniel Jensen Nov 28 '17 at 10:16
The problem is, that the pictures are not getting the right size when I adjust the width - they are just cutted in that size. – Daniel Jensen Nov 28 '17 at 10:33
@DanielJensen how you want them to behave ? as we can adjust them for mobile – Temani Afif Nov 28 '17 at 10:38
Well, now it's just 3 long pictures. Can we make them appear under each other on mobile? So on desktop they are next to each other and on mobile under each other? – Daniel Jensen Nov 28 '17 at 10:39
1

@DanielJensen updated, have a look, i simply added a media query. And for the href, you can make it on the p tag – Temani Afif Nov 28 '17 at 10:41
Still can't get the href to work, though. Want the image to be the link - not just the text :) – Daniel Jensen Nov 28 '17 at 10:58
@DanielJensen here is a fiddl https://jsfiddle.net/rjssxn8x/ to avoid editing the answer too much ;) – Temani Afif Nov 28 '17 at 11:04
Cool. I'm using Joomla, and it constantly remove the `a href` code when I save.. Have to look it up .. – Daniel Jensen Nov 28 '17 at 11:06
@DanielJensen in this case replace `p` with `span` – Temani Afif Nov 28 '17 at 11:07
Did it, using this: https://stackoverflow.com/questions/796087/make-a-div-into-a-link – Daniel Jensen Nov 28 '17 at 12:08

score 1 · Answer 2 · answered Dec 18 '17 at 08:22

<style>
img {
    width: 100%;
}
.timetable {
    position: relative;
}
.content {
    position: absolute;
    z-index: 999999;
    bottom: 0;
    color: white;
    padding-left: 21px;
}
</style>



<!DOCTYPE html>
<html>
<head>
    <title>Gallery</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>

<div class="timetable">
    <div class="row">
        <div class="col-md-4">
            <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="set up time" width="30%">
            <div class="content">
                <h3>Hello</h3> 
            </div>
            </div>
            <div class="col-md-4">
            <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="doors open" width="30%">
            <div class="content">
                <h3>Hello</h3>
            </div>
        </div>
        <div class="col-md-4">
            <img src="http://ihearthsv.com/wp-content/uploads/2016/05/Courtesy-of-the-Land-Trust.jpg" alt="Foodtrucks" width="30%">
            <div class="content">
                <h3>Hello</h3>
            </div>
        </div>
        </div>
        </div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

3 images next to each other with text

2 Answers2