Why my array doesn't display title in every image?

Hello I’m wondering how could I make appear a title over each image, I have been trying to do so without success help please;
CODEPEN
HTML

<div id="div8" class="div8">
</div>

CSS

.imgStyle {
  width: 500px;
  height: 150px;
  margin: 10px;
}

JS

var ArrayOfImages = ['https://cdn.mos.cms.futurecdn.net/54LNwFS62fB3XLm2gikEr6-1200-80.jpg', 'https://media1.s-nbcnews.com/j/newscms/2018_37/2566431/180914-stock-universe-al-1025_cdb902a22ae43a09c662a5f03f673a82.fit-1240w.jpg', 'https://lithub.com/wp-content/uploads/2018/06/milky-way.jpg']; 
ArrayOfImages.forEach(function(image) {    
  var div8Container = document.getElementById("div8");
  var img = document.createElement('img'); 
  img.src = image;                        
  img.title = 'Your title';
  img.classList.add("imgStyle");
  div8Container.appendChild(img);         
});

Hello~!

I see the title elements appearing when I load your codepen.

yup it appears but only when I move the cursor over the image but I would like to have a title over each image, I have been trying different methods without success

If you are looking for text above the image, you’ll need to add another element.

The title attribute you are assigning creates the hover textbox.

I was also trying to make it work creating a separate div so I could get titles separated on each div but didn’t work ether

var ArrayOfImages = ['https://cdn.mos.cms.futurecdn.net/54LNwFS62fB3XLm2gikEr6-1200-80.jpg', 'https://media1.s-nbcnews.com/j/newscms/2018_37/2566431/180914-stock-universe-al-1025_cdb902a22ae43a09c662a5f03f673a82.fit-1240w.jpg', 'https://lithub.com/wp-content/uploads/2018/06/milky-way.jpg']; //your assumed array
ArrayOfImages.forEach(function(image) {    
  var div8Container = document.createElement('div');
  div8Container.classList.add("subDiv8");
  var img = document.createElement('img'); 
  img.src = image;                        
  img.classList.add("imgStyle");
  div8Container.appendChild(img);  
  var div8Container = document.createElement('div');
  div8Container.classList.add("subDiv8");
  var imgP = document.createElement("p");
  imgP.innerHTML = "button";
  imgP.classList.add("pStyle");
  div8Container.appendChild(imgP);    
});

Have you tried switching it around?

I’d select the container, append a p element to the container, then append the img element to that p element.

1 Like

thanks for the help took me an entire day to figure this out, but finally manage to display the pics exactly how I wanted them!!! Any suggestions welcome
CODEPEN