الموقع الذي وضعته كمثال ليس ووردبريس
ممكن تعطينا مثال في موقع يكون يستخدم الووردبريس حتى نرى كيف يتم استعمال العنوان فوق الصورة؟

هذه طريقتين لجعل العنوان أو نص على الصورة وأنت طبق على موقعك:
الأولى:
كود html:

<div class="module top">
  <h2>Skyscrapers</h2>
</div>

<div class="module mid">
  <h2>Skyscrapers</h2>
</div>

<br style="clear: both;">

<div class="module cap">
  <p>Skyscraper are really neat and stuff because they are tall.</p>
</div>

<div class="module lr">
  <p>Skyscrapers sometimes have nicknames like jim or shim.</p>
</div>

كود css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);

.module {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-size: cover;
  width: 300px;
  height: 200px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}

.top h2 {
  color: white;
  margin: 0;
  padding: 20px;
}

.lr p {
  font-family: 'Roboto', sans-serif;
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  margin: 0;
}

.mid h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}

.cap p {
  padding: 20px;
  color: white;
  font: 12px Monaco, Mono-Space;
  margin: 0;
}

الثانية:
كود html:

<div class="container">
  <img src="img_fjords_wide.jpg" alt="Norway" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

كود css

/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

في القالب ابحث عن:

the_post_thumbnail()

فهو المسؤول عن إظهار الصورة البارزة
وابحث عن:

the_title()

فهو الذي يظهر العنوان المقالة ثم عدل ما يجب تعديله فيجب أن تعرف كيف تعدل على موقعك لأنك تملك موقعا وتديره ودائما ستحتاج للتعديل فيجب أن تعرف قالبك جيدا وكيفية التعديل.
————–
هذا مثال آخر عن إظهار نص فوق صورة بشكل جميل عن تمرير الفأرة فوقها:
html:

<div class="image-frame">
	<img src="4.jpg"/>
	<div class="image-caption">
	  <h2>Slide1</h2>
	  Mouse over Slide 1 to view the caption.
	</div>
</div>
<div class="image-frame">
	<img src="2.jpg"/>
	<div class="image-caption">
	  <h2>Slide2</h2>
	  Mouse over Slide 2 to view the caption.
	</div>
</div>

css:

.image-frame {
	float: left;
	position: relative;
	margin: 5px;
	color: #333;
}
.image-frame .image-caption {
	display: none;
	opacity: 0.8;
	background:#cae5c1;
	width: 290px;
	position: absolute;
	bottom: 0px;
	padding: 5px;
}

jQuery:

jQuery(document).ready(function($) {
    $('.image-frame').hover(function(){
		$('.image-caption',this).slideToggle('slow');
	}, function(){
		$('.image-caption',this).slideToggle('slow');
    });
});

بالتوفيق حبيبي