Logo Luan Morina
Display a random image with PHP
 
Preview
Rome
Rome
PHP
<?php
$randomArray = array(

'<figure><img src="images/hamburg.jpg" alt="Hamburg">
<figcaption>Hamburg</figcaption></figure>',

'<figure><img src="images/london.jpg" alt="London">
<figcaption>London</figcaption></figure>',

'<figure><img src="images/rome.jpg" alt="Rome">
<figcaption>Rome</figcaption></figure>'

);

$displayAtRandom = 
$randomArray[array_rand($randomArray)];
echo $displayAtRandom;
?>
CSS
.bg-container {
background-image:url("bg.jpg");
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
height: 100%;
padding: 2rem 1rem;
}

figure {
margin: 0 auto;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 260px; 
padding: 1em;
border-radius: 4px;

background: radial-gradient(
circle at 0% 0.5%, 
rgb(241, 241, 242) 0.1%, 
rgb(224, 226, 228) 100.2%
);
box-shadow: rgba(0, 0, 0, 0.24) 
0px 3px 8px;
} 

img {
max-width: 300px;
max-height: 200px;
}

figcaption {
padding-top: 10px;
text-align: center;
text-transform: uppercase;
font-size: smaller;
}