I am unable to get a name to float in the center of these pictures when I hover

Question

I am unable to get a name to float in the center of these pictures when I hover over them. I can get the name to appear sometimes, but centered.

???????????! 18th Century 19th Century 20th Century About Contact Us Quiz Presidents George Washington and Thomas Jefferson's managed - under the ownership of many slaves - large estates that survive to this day. Estates that are continually researched and unmasked by historians and archaeologists and which have led to a rich and complicated stoyline continues to intrigue. And while both men are inextricably linked to their lives as farmers, there were other presidents in both the 19th and 20th centuries with farming backgrounds. And often those parts of their lives are not highlighted because often the presidents themselves are rarely talked about in a contestlohn Twarz Ansone

Explanation / Answer

Css code:

<style type="text/css">

a.hovertext {

position: relative;

width: 500px;

text-decoration:

none !important;

text-align: center;

}

a.hovertext::after

{ content: attr(title);

position: absolute;

left: 0; bottom: 0;

padding: 0.5em 20px;

width: 460px;

background: rgba(0,0,0,0.8);

text-decoration: none !important;

color: #fff;

opacity: 0;

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

-ms-transition: 0.5s;

}

a.hovertext:hover::after, a.hovertext:focus::after {

opacity: 1.0;

}

</style>

use as below

<p><a class="hovertext" href="#" title="The title attribute of the link appears over the image on hover"><img src="/images/css_textoverimage.jpg" width="500" height="309" border="0" alt=""></a></p>

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.