I would like to know how I can insert text and different text in each grid box hovering over the background image in certain position of the images, as I have tried everything, by adding different code and search at the help section. I haven't found anything yet. If you have any advice please anything will do
here is my code I have worked with,
thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.destination-container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto auto auto;
grid-gap: 10px;
background-color: rgb(104, 104, 231);
}
.destination-container > div {
background-color: rgba(96, 129, 221, 0.8);
text-align: center;
padding: 20px 0;
justify-content: center;
font-size: 15px;
}
.top-left {
position: absolute;
color: white;
top: 100px;
left: 150px;
align-self: center;
}
/* .grid-item {
background-color: rgba(96, 129, 221, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 5px;
font-size: 30px;
text-align: center;
grid-row: auto;
width: "10";
vertical-align: inherit;
height: "5";
}
.text-block {
position: absolute;
bottom: 60%;
right: 80%;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
.centered {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: larger;
}*/
<h2 style=color:blueviolet> Destination </h2>
<div class="destination-container">
<div class="destination1"><img src="https://www.marathoncoach.com/wp-content/uploads/2018/02/Banff-1140x642.jpg" width="500px" height="350px">
<div class="top-left">Top Left</div>
</div>
<div class="destination2"><img src="https://content.r9cdn.net/rimg/kimg/71/ef/f431b339-16489292bf8.jpg?width=568&height=350&crop=true&caller=HotelDetailsPhoto" width="500px" height="350px">
<div class="top-left">Top Left2</div>
</div>