I am a student and new to coding. I have an image and would like the actors name to appear in center of image as a clickable link to show as a hover effect. This is what I want it to look like!
I tried the code that is listed on the link above but name will not show as link. Here's a screenshot since it's just a file on my computer.
I have included coding for two of the 10 images I will use.
HTML-
<div class="pics-container">
<a href="https://en.wikipedia.org/wiki/Jason_Bateman">
<img src="pics/Jason.jpg" alt="Jason Bateman" class="image" border="2px";>
</a><div class="middle"><div class="name">Jason Bateman</div></div>
<div class="pics-container">
<a href="https://en.wikipedia.org/wiki/Rachel_McAdams">
<img src="pics/Rachel.jpg" alt="Rachel McAdams" class="image" border="2px";>
</a><div class="middle"><div class="name">Rachel McAdams</div></div>
CSS-
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 38%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.pics-container {
position: relative;
display: flex;
width: 50%;
padding: 20px;
}
.pics-container:hover .image {
opacity: 0.3;
}
.pics-container:hover .middle {
opacity: 1;
}
.name {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
This is from me researching and trying to put the codes together. Also, after adding padding the images are now stair-stepped instead of being lined up.
Is this what u want?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.img_hover:hover .image {
opacity: 0.3;
}
.img_hover:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add anchor tag outside of name like this
<div class="text">John Doe</div>
Related
I am trying to currently trying to create an overlay for a card body in Bootstrap. But i am not sure how to proceed now because the overlay keeps blocking the button that is located inside the card and I need to be able to click on the button. Not sure what to do now, some help would be amazing.
Html is here:
.rafting {
background-image: url(./img/rafting.jpg);
background-size: cover;
color: white;
}
.rafting:before {
content: "";
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: rgba(0,0,0,.5);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<section class="offres">
<h2 class="text-center">NOS OFFRES</h2>
<div class="container">
<div class="row text-center">
<div class="column">
<img class="mb-5" src="./img/picto-logo/picot1.png" alt="Snow" style="width:65%">
Go somewhere
</div>
<div class="column">
<img class="mb-5" src="./img/picto-logo/picot2.png" alt="Forest" style="width:65%">
Go somewhere
</div>
<div class="column">
<img class="mb-5" src="./img/picto-logo/picot3.png" alt="Mountains" style="width:65%">
Hello
</div>
</div>
</div>
</section>
Use z-index on the element you want to be on top. I usually start with a value of 9 and keep adding 9's until I get the desired effect.
i.e.:
.button {
z-index: 9;
}
Image parent div need to be "position:relative" and overlay is "position: absolute". When you hover the image, Overlay display.
.column {
width: 300px;
color: white;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.column:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 300ms ease;
}
.column img {
width: 100%;
}
.btn-primary {
position: absolute;
z-index: 2;
}
.column:hover:before {
opacity: 1;
transition: all 300ms ease;
}
<section class="offres">
<h2 class="text-center">NOS OFFRES</h2>
<div class="container">
<div class="row text-center">
<div class="column">
<img class="mb-5" src="https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg" alt="Snow">
Go somewhere
</div>
<div class="column">
<img class="mb-5" src="https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg" alt="Forest">
Go somewhere
</div>
<div class="column">
<img class="mb-5" src="https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg" alt="Mountains">
Hello
</div>
</div>
</div>
</section>
I have a grid layout of 4 photos and I need to set them to change when hovered over.
I am able to do this with one image using 'img:hover' and 'position: absolute;' however with multiple images, absolute positioning messes up the layout.
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="column">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
</div>
</div>
This is the code that I have so far and I have tried adding background(url...) in the CSS to no avail.
Any help/guidance would be much appreciated, many thanks!
Try with
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
</div>
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
<div class="column">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
<img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
</div>
</div>
CSS
*{
box-sizing:border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
position:relative;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.hover-img{
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.column:hover img + img{
display:block;
}
https://jsfiddle.net/lalji1051/jhrpfq8u/4/
You can use Overlay using css. Please check this .. It will work for you
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">111<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">222<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">333<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
<div class="container">
<img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">444<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
</div>
</div>
</body>
</html>
The solution was to add the code suggested by Lalji above so that the style was applied to the images accordingly.
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
padding: 20px;
font-family: sans-serif;
background: #f2f2f2;
margin: 0;
}
img {
width: 100%;
height: auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
/* hover styles */
.location-listing {
position: relative;
}
.location-image {
line-height: 0;
overflow: hidden;
}
.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
transform: scale(1.1);
}
.location-title {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
background: rgba(90, 0, 10, 0.4);
color: white;
/* position the text in t’ middle*/
display: flex;
align-items: center;
justify-content: center;
}
.location-title:hover {
color: #ffffff;
text-decoration: none;
}
.location-listing:hover .location-title {
opacity: 1;
}
.location-listing:hover .location-image img {
filter: blur(2px);
}
/* for touch screen devices */
#media (hover: none) {
.location-title {
opacity: 1;
}
.location-image img {
filter: blur(2px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="child-page-listing">
<div class="grid-container">
<article id="3685" class="location-listing">
<a class="location-title" href="#">San Francisco</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</div>
</article>
<article id="3688" class="location-listing">
<a class="location-title" href="#">London</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
</div>
</article>
<article id="3691" class="location-listing">
<a class="location-title" href="#">New York</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
</div>
</article>
<article id="3694" class="location-listing">
<a class="location-title" href="#">Cape Town</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>
</article>
<article id="3697" class="location-listing">
<a class="location-title" href="#">Beijing</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/beijing-768x432.jpg" alt="beijing">
</div>
</article>
<article id="3700" class="location-listing">
<a class="location-title" href="#">Paris</a>
<div class="location-image">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/paris-768x432.jpg" alt="paris">
</div>
</article>
</div>
<!-- end grid container -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
.destination {
position: relative;
}
.dest-topic{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
color: #fff;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.destination:hover .dest-topic {
visibility: visible;
padding:0px !important;
}
.dest-title {
color: white;
font-size: 18px;
transition: .1s;
transform: translateY(1em);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet"/>
<div class=" uk-child-width-1-2 uk-padding-xsmall uk-child-height-1-2 " uk-grid="">
<div class="uk-first-column">
<div class="uk-child-width-expand#s uk-padding-xsmall uk-text-center " uk-grid="">
<div class="uk-first-column uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?heli"alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Annapurna Base Camp</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-child-width-expand#s uk-text-center " uk-grid="">
<div class="uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?annapurna" alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Everest Base Camp</div>
</div>
</div>
</div>
</div>
</div>
This code is written in uikit framework. There are two uikit image. When I hover the image, overlay background image color come out. I want to remove that extra overlay background image color. It shows exact the image only. when I hover the image. It cover only the background-image.
Set left:30px in .dest-topic, because left 30px padding given in .uk-grid>* class
.destination {
position: relative;
}
.dest-topic {
position: absolute;
top: 0;
bottom: 0;
left: 30px;
right: 0;
background: rgba(0, 0, 0, 0.3);
color: #fff;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.destination:hover .dest-topic {
visibility: visible;
padding:0px !important;
}
.dest-title {
color: white;
font-size: 18px;
transition: .1s;
transform: translateY(1em);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet"/>
<div class=" uk-child-width-1-2 uk-padding-xsmall uk-child-height-1-2 " uk-grid="">
<div class="uk-first-column">
<div class="uk-child-width-expand#s uk-padding-xsmall uk-text-center " uk-grid="">
<div class="uk-first-column uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?heli"alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Annapurna Base Camp</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-child-width-expand#s uk-text-center " uk-grid="">
<div class="uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?annapurna" alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Everest Base Camp</div>
</div>
</div>
</div>
</div>
</div>
I'm attempting to centre an image and div layer inside a containing div, but so far I can't get it to move from the left of the column. I've tried a few different ways but just can't get it to move. Even the margin auto trick isn't working, which I suspect is because bootstrap 4 is a flex box now.
HTML:
#user-avatar {
background: #ff4e00;
border-radius: 50%;
width: 250px;
margin-bottom: 25px;
position: relative;
}
#user img {
border-radius: 50%;
width: 250px;
transition: .5s ease;
backface-visibility: hidden;
}
#user-avatar:hover img {
cursor: pointer;
opacity: 0.3;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.middle i {
font-size: 34px;
}
#user-avatar:hover .middle {
opacity: 1;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
<div class="col-12" id="user-avatar">
<img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
<p id="username" class="text-center"><span>Howdy </span>Liane</p>
<div id="xp-bar" class="text-left">
<div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
</div>
<p id="stats" class="text-right">Level 1</p>
</div>
It's the image and the 'underlay' ('middle' div) that I need to be in the center.
Add margin-left: 50% and transform: translateX(-50%) to #user-avatar. check below link.
thank you
http://jsfiddle.net/x1hphsvb/10994/
Add Class on id="user-avatar" to mx-auto
<div class="col-12 mx-auto" id="user-avatar">
<img class="d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
https://jsfiddle.net/lalji1051/v06j8orn/9/
simply add this style - centrd now
#user-avatar {
margin: 0 auto;
}
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.
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.
<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>