Cool image

Position; Image; hover

by jshacker

HTML

<div class="image-container paintingA">
  <img
    src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Boris_Kustodiev_-_Shrovetide_-_Google_Art_Project.jpg/2880px-Boris_Kustodiev_-_Shrovetide_-_Google_Art_Project.jpg"
    class="image"
  />
  <div class="contained image-message-container">
    <span class="message">This is a cool painting.</span>
  </div>
</div>

<div class="image-container painting-santa">
  <img
    src="//upload.wikimedia.org/wikipedia/commons/thumb/4/42/MerryOldSanta.jpg/440px-MerryOldSanta.jpg"
    class="image"
  />
  <div class="contained image-message-container">
    <span class="message">Old Santa depiction.</span>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

img {
  margin: 1rem;
  display: block;
}

.paintingA {
  width: calc(100dvw - 2rem);
}

.painting-santa {
  height: 100dvh;
}

.image-container {
  position: relative;
}

.image-container .contained {
  position: absolute;
}

.image-container .image {
  height: auto;
  width: inherit;
}

.image-container .image-message-container {
  top: 4%;
  left: 0;
  height: 50px;
  line-height: 50px;
  background-color: rgba(255, 255, 255, 0.3);
  color: black;
  width: 100%;
  text-align: center;
}

.image-message-container {
  display: none;
}

.image-container:hover .image-message-container {
  display: initial;
}