Как мне разместить текст, раскрывающий изображение в странных позициях? - PullRequest
Новая
       14

Как мне разместить текст, раскрывающий изображение в странных позициях?

0 голосов
/ 02 апреля 2020

Я получил изображение. Событие при наведении курсора показывает наложение текста на изображение. Это будет использоваться на странице персонажа. У меня проблемы с позиционированием изображения. Изображение должно просто плавать вокруг центра.

Пример Live (codepen)

Я уже нашел этот код css, если помогает: 

/*
 * Note: If you are using landscape images use 'background-size:auto 100%;'
 * in .textOverImage and 'background-size:auto 110%;' in .textOverImage:hover
 */

a { text-decoration:none; }

/*
 * Add the following compatibility code for IE as you can't animate
 * background-size in IE
 */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
  .textOverImage{background-size:cover!important;}
}

.textOverImage {
  position:relative;
  width:300px;
  height:300px;
  float:left;
  margin:4px;
  background-size:100%;
  background-position:center;
  transition:0.5s;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 0 4px #000;
}

.textOverImage:hover {
  background-size:110%;
}

.textOverImage:before {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transform:translateY(90%); /*use transform:translateY(100%); to remove footer*/
  background-color:rgba(0,0,0,0.3);
  color:#fff;
  padding:0 8px;
  content:attr(data-title);
  transition:0.5s 0.1s;
  color:#fff;
  font-weight:bold;
  font-size:1.5em;
}

.textOverImage:after {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  color:#fff;
  padding:8px;
  content:attr(data-text);
  transition:0.5s;
  padding-top:2em;
  margin-top:8px;
  transform:translateY(100%);
  opacity:0;
}

.textOverImage:hover:after {
  transform:translateY(0);
  transition:0.5s 0.1s;
  opacity:1;
}

.textOverImage:hover:before {
  transform:translateY(0);
  padding:8px;
  background-color:rgba(0,0,0,0.6);
  transition:0.5s;
}
...