{"id":1524,"date":"2018-02-24T22:41:16","date_gmt":"2018-02-25T03:41:16","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1524"},"modified":"2018-02-24T22:41:16","modified_gmt":"2018-02-25T03:41:16","slug":"html-css-how-to-get-text-to-appear-over-an-image-on-hover","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/02\/24\/html-css-how-to-get-text-to-appear-over-an-image-on-hover\/","title":{"rendered":"HTML & CSS: How to get text to appear over an image on hover"},"content":{"rendered":"

I have an image on a web page that I want to display a text message whenever the mouse pointer hovers over the image. For example, I want to display the text “Placeholder Image” whenever the mouse pointer hovers over the image.<\/p>\n

The image itself is round with a blue border. This was styled with a CSS class called “bio-photo”, which uses a border-radius: 50%; to make the image round. For this example, I set a default width variable set to 400px. Here is the CSS to create the round image.<\/p>\n

:root {\r\n  --width: 400px;\r\n}\r\n\r\n.bio-photo {\r\n  border-radius: 50%;\r\n  border: 20px solid #1565C0;\r\n  display: block;\r\n  width: var(--width);\r\n  height: auto;\r\n}<\/pre>\n
And the HTML used to place this image on the page:<\/p>\n
<img  src=\"http:\/\/bluegalaxy.info\/images\/sea_captain.jpg\" class=\"bio-photo\"><\/pre>\n
Now to get the functionality of having a text message appear over the image on hover, I had to create three more div classes, which I called “img-hover”, “overlay”, and “hover-text”.\u00a0 The image tag needs to be placed inside the “img-hover” div, followed by the “overlay” div, which has the “hover-text” div nested inside it. Here is the complete HTML:<\/p>\n
<div class=\"img-hover\">\r\n   <img  src=\"http:\/\/bluegalaxy.info\/images\/sea_captain.jpg\" class=\"bio-photo\">\r\n   <div class=\"overlay\">\r\n      <div class=\"hover-text\">Placeholder Image<\/div>\r\n   <\/div>\r\n<\/div><\/pre>\n
Here is the complete CSS:<\/p>\n
:root {\r\n  --width: 400px;\r\n}\r\n\r\n.bio-photo {\r\n  border-radius: 50%;\r\n  border: 20px solid #1565C0;\r\n  display: block;\r\n  width: var(--width);\r\n  height: auto;\r\n}\r\n\r\n.img-hover {\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\n.overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  width: var(--width);\r\n  opacity: 0;\r\n  transition: .5s ease;\r\n  background: rgba(0,0,0,0.25);\r\n  border-radius:50%;\r\n  border: 20px solid #1565C0;\r\n}\r\n\r\n.img-hover:hover .overlay {\r\n  opacity: 1;\r\n}\r\n\r\n.hover-text {\r\n  color: black;\r\n  font-size: 3em;\r\n  font-family: Ubuntu;\r\n  font-weight: bold;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  -ms-transform: translate(-50%, -50%);\r\n  text-align: center;\r\n}<\/pre>\n
Here is what the result looks like on Codepen:<\/p>\n
\nSee the Pen Text on image hover \u2013 circular image by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
I have an image on a web page that I want to display a text message whenever the mouse pointer hovers over the image. For example, I want to display the text “Placeholder Image” whenever the mouse pointer hovers over the image. The image itself is round with a blue border. This was styled with … Continue reading HTML & CSS: How to get text to appear over an image on hover<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[10,105],"class_list":["post-1524","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1524"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1524\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1524\/revisions\/1530"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}